List Items and Paginator Configuration

Property: tableHeight

This property aligns with the tableHeight attribute in Element UI's table componnet, with the distinction that the default value is set to 550.

Property: tableColumnList and Slots: default / tableShow

Property: tableColumnList

The component enables paginator configuration via the tableColumnList property, achieving minimal DOM usage while supporting nested multi-level structures. Attributes that need binding to the ElTableColumn tag can be directly declared within the croresponding object.

<template>
  <TablePage :fetchData="fetchUserData" :columns="columnDefinitions" />
</template>
<script setup>
  import TablePage from 'tablepage-vue3'
  const fetchUserData = () => ({
    totalCount: 8,
    items: new Array(8).fill({ fullName: 'John Doe', contactNumber: '555-1234' })
  })
  const columnDefinitions = [
    { type: 'index', label: 'Index', width: '90' },
    { prop: 'fullName', label: 'Full Name', minWidth: '90', showOverflowTooltip: true },
    { prop: 'contactNumber', label: 'Contact', minWidth: '90', showOverflowTooltip: true }
  ]
</script>

This configuration yields the same result as:

<template>
  <TablePage :fetchData="fetchUserData">
    <template #default>
      <el-table-column type="index" label="Index" align="center" width="90" />
      <el-table-column prop="fullName" label="Full Name" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="contactNumber" label="Contact" align="center" min-width="90" show-overflow-tooltip />
    </template>
  </TablePage>
</template>
<script setup>
  import TablePage from 'tablepage-vue3'
  const fetchUserData = () => ({
    totalCount: 8,
    items: new Array(8).fill({ fullName: 'John Doe', contactNumber: '555-1234' })
  })
</script>

Nested Multi-Level: children

For multi-level table structures, use the children property. Its internal structure matches tableColumnList, but it will be wrapped within a parent ElTableColumn to create a nested effect.

<template>
  <TablePage :fetchData="fetchUserData" :columns="columnDefinitions" />
</template>
<script setup>
  import TablePage from 'tablepage-vue3'
  const fetchUserData = () => ({
    totalCount: 8,
    items: new Array(8).fill({ fullName: 'John Doe', contactNumber: '555-1234' })
  })
  const columnDefinitions = [
    { type: 'index', label: 'Index', width: '90' },
    {
      label: 'User Details',
      children: [
        { prop: 'fullName', label: 'Full Name', minWidth: '90', showOverflowTooltip: true },
        { prop: 'contactNumber', label: 'Contact', minWidth: '90', showOverflowTooltip: true }
      ]
    },
    { prop: 'timestamp', label: 'Time', minWidth: '180', showOverflowTooltip: true }
  ]
</script>

This is equivalent to:

<template>
  <TablePage :fetchData="fetchUserData">
    <template #default>
      <el-table-column type="index" label="Index" align="center" width="90" />
      <el-table-column label="User" align="center">
        <el-table-column prop="fullName" label="Full Name" align="center" min-width="90" show-overflow-tooltip />
        <el-table-column prop="contactNumber" label="Contact" align="center" min-width="90" show-overflow-tooltip />
      </el-table-column>
      <el-table-column prop="timestamp" label="Time" align="center" min-width="180" show-overflow-tooltip />
    </template>
  </TablePage>
</template>
<script setup>
  import TablePage from 'tablepage-vue3'
  const fetchUserData = () => ({
    totalCount: 8,
    items: new Array(8).fill({ fullName: 'John Doe', contactNumber: '555-1234' })
  })
</script>

Slot: slotName

When a column requires a custom slot, specify the slot name using slotName. The component will pass the relevant row fields to this slot.

<template>
  <TablePage border :fetchData="fetchUserData" :columns="columnDefinitions">
    <template #customColumn="{ row }"> {{ row }} </template>
  </TablePage>
</template>
<script setup>
  import TablePage from 'tablepage-vue3'
  const fetchUserData = () => ({
    totalCount: 8,
    items: new Array(8).fill({ fullName: 'John Doe', contactNumber: '555-1234' }).map((item, idx) => ({ ...item, idx }))
  })
  const columnDefinitions = [
    { type: 'index', label: 'Index', width: '90' },
    { prop: 'fullName', label: 'Full Name', minWidth: '90', showOverflowTooltip: true },
    { slotName: 'customColumn', label: 'Slot', minWidth: '90' }
  ]
</script>

Slots: default / tableShow

The default and tableShow slots produce identical effects and can be used interchangeably based on preference.

Priority

Priority order is: default slot > tableShow slot > tableColumnList property.

Property: noPage

Declaring noPage hides the paginator, disabling pagination functionality.

<template>
  <TablePage noPage :fetchData="fetchUserData">
    <template #default>
      <el-table-column type="index" label="Index" align="center" width="90" />
      <el-table-column prop="fullName" label="Full Name" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="contactNumber" label="Contact" align="center" min-width="90" show-overflow-tooltip />
    </template>
  </TablePage>
</template>
<script setup>
  import TablePage from 'tablepage-vue3'
  const fetchUserData = () => ({
    totalCount: 8,
    items: new Array(8).fill({ fullName: 'John Doe', contactNumber: '555-1234', timestamp: '2024-04-12' })
  })
</script>

Property: paginationProps

Properties that need configuration on the paginator tag can be declared within paginationProps. The component will internally apply these attributes.

<template>
  <TablePage :fetchData="fetchUserData" :paginationProps="paginatorConfig">
    <template #default>
      <el-table-column type="index" label="Index" align="center" width="90" />
      <el-table-column prop="fullName" label="Full Name" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="contactNumber" label="Contact" align="center" min-width="90" show-overflow-tooltip />
    </template>
  </TablePage>
</template>
<script setup>
  import TablePage from 'tablepage-vue3'
  const fetchUserData = () => ({
    totalCount: 100,
    items: new Array(10).fill({ fullName: 'John Doe', contactNumber: '555-1234', timestamp: '2024-04-12' })
  })
  const paginatorConfig = {
    background: true,
    layout: 'prev, pager, total, next'
  }
</script>

The rendered paginator at the bottom is equivalent to:

  <el-pagination
    v-model:currentPage="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    layout='prev, pager, total, next'
    :background="true"
  />

Other ElTable-Related Properties

Properties that need to be written to ElTable can be directly applied to this component, as they will be passed through to ElTable internally. For example, to achieve the effect of <el-table row-class-name="rowClassName">, use <table-page-vue3 row-class-name="rowClassName" >. To trigger events on ElTable, access the tableRef object exposed by this component. For instance, to invoke the setCurrentRow method of ElTable, declare a ref with <TablePage ref="tablePageRef"> and then trigger it via tablePageRef.value.tableRef.setCurrentRow().

Props Configuration

pageNumKey

This field specifies the page number parameter sent to fetchData. Default value: page.

pageSizeKey

This field specifies the page size parameter sent to fetchData. Default value: limit.

totalKey

This field specifies the key to extract total data count from the fetchData response. Default value: count.

dataKey

This field specifies the key to extract list data from the fetchData response. Default value: data.

pageNumInit

This field initializes the starting page number. Default value: 1.

pageSizeInit

This field initializes the page size. Default value: 10.