table

介绍

以 element-plus 为例，该组件将其 table 组件，pagination组件进行了整合, 并扩展了一些slot，如：cellSlot（单元格插槽）、columnSlot（列插槽）、customHeaderSlot（自定义表头插槽），可以让开发者灵活的定义。除此之外，该组件还提供了一个 deleteRow 实例方法，用于删除某一行并更新 table 数据。

TIP

使用该组件时，请确保在项目中已经安装并配置好 element-plus 库。

TIP

如果使用 unplugin-vue-components 库对 element-plus 进行按需引入时要注意

因为该组件是通过 component vue 的内置组件渲染 el-table 的，这使得 unplugin-vue-components 不会自动引入 el-table 相关组件相关Issue，因此你需要手动导入组件。如果在使用改组件之前， unplugin-vue-components 已经自动导入了 el-table 的相关组件，则无需手动导入以下配置。

举个例子：

在使用 pin-table 之前你并没有直接使用 el-table 组件，这个时候 components.d.ts 的配置，如下：

// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'

export {}

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    PinFilterGroup: typeof import('pinos-ui')['PinFilterGroup']
  }
}

这个时候你就需要手动引入 el-table 组件及它相关组件(如果你开启了 showPagination, 你还需要手动导入 el-pagination 组件)

新建一个 element-plus 导入文件

// element-plus/index.ts
import {  ElTable ElTableColumn, ElEmpty } from 'element-plus'
import type { App } from 'vue'
import 'element-plus/es/components/table/style/css'
import 'element-plus/es/components/table-column/style/css'
import 'element-plus/es/components/empty/style/css'

export default function (app: App) {
  app.component(ElTable.name, ElTable)
  app.component(ElEmpty.name, ElEmpty)
  app.component(ElTableColumn.name, ElTableColumn)
}

在入口文件中使用该配置

// main.ts

import InstallElementPlus from './element-plus/index'
// ...

createApp(App).use(InstallElementPlus)

背景

在多数的组件库，如：naiveui、vexipui、antdv 中都有 table 组件，且它们都有一个共同点，都是通过配置的方式去渲染的。但是 element-plus 中的 table 组件则是通过 el-table-column 组件去渲染每一列，这也就意味着，我们需要写许多次 el-table-column，这样我感觉代码不够简洁和直观。因此封装了这该组件用于解决这个问题。

代码示例

自定义表头

129871221298712212987122129871221298712212987122	Tom	234	3.2	10
12987123	Tom	165	4.43	12
12987124	Tom	324	1.9	9
12987125	Tom	621	2.2	17
12987126	Tom	539	4.1	15

提示配置 customHeaderSlot 属性

<template>
  <div class="box">
    <pin-table
      :table-data="tableData"
      :table-column-props="tableColumnProps"
      :show-pagination="false"
    >
      <template #nameHeader>
        <span class="text-red">我是自定义表头</span>
      </template>
      <template #amount2Header>
        <span class="text-red">我是自定义表头2</span>
      </template>
    </pin-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { TableColumnProps } from 'pinos-ui'

const tableData = ref<Record<string, any>[]>([])
const tableColumnProps = ref<TableColumnProps[]>([
  {
    label: 'id',
    prop: 'id',
    showOverflowTooltip: true
  },
  {
    label: 'Name',
    prop: 'name',
    width: '104px',
    customHeaderSlot: 'nameHeader'
  },
  {
    label: 'amount1',
    prop: 'amount1',
    showOverflowTooltip: true
  },
  {
    label: 'amount2',
    prop: 'amount2',
    width: '104px',
    customHeaderSlot: 'amount2Header'
  },
  {
    label: 'amount3',
    prop: 'amount3',
    showOverflowTooltip: true
  }
])

const mockSyncRequest = (data: any[], time = 1000): Promise<any[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data)
    }, time)
  })
}

const requestTableData = async () => {
  tableData.value = await mockSyncRequest([
    {
      id: '129871221298712212987122129871221298712212987122',
      name: 'Tom',
      amount1: '234',
      amount2: '3.2',
      amount3: 10
    },
    {
      id: '12987123',
      name: 'Tom',
      amount1: '165',
      amount2: '4.43',
      amount3: 12
    },
    {
      id: '12987124',
      name: 'Tom',
      amount1: '324',
      amount2: '1.9',
      amount3: 9
    },
    {
      id: '12987125',
      name: 'Tom',
      amount1: '621',
      amount2: '2.2',
      amount3: 17
    },
    {
      id: '12987126',
      name: 'Tom',
      amount1: '539',
      amount2: '4.1',
      amount3: 15
    }
  ])
}

onMounted(() => {
  requestTableData()
})
</script>

<style scoped>
.box {
  height: 400px;
}

.text-red {
  color: red;
}
</style>

展开行

129871221298712212987122129871221298712212987122	Tom	234
12987123	Tom	165
12987124	Tom	324
12987125	Tom	621
12987126	Tom	539

<template>
  <div class="box">
    <pin-table
      :table-data="tableData"
      :table-column-props="tableColumnProps"
      :show-pagination="false"
    >
      <template #expend="scope">
        <div>
          <p>amount2: </p>
          <p>{{ scope.data.amount2 }}</p>
          <p>amount3: </p>
          <p>{{ scope.data.amount3 }}</p>
        </div>
      </template>
    </pin-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { TableColumnProps } from 'pinos-ui'

const tableData = ref<Record<string, any>[]>([])
const tableColumnProps = ref<TableColumnProps[]>([
  {
    type: 'expand',
    cellSlot: 'expend'
  },
  {
    label: 'id',
    prop: 'id',
    showOverflowTooltip: true
  },
  {
    label: 'Name',
    prop: 'name',
    width: '104px'
  },
  {
    label: 'amount1',
    prop: 'amount1',
    showOverflowTooltip: true
  }
])

const mockSyncRequest = (data: any[], time = 1000): Promise<any[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data)
    }, time)
  })
}

const requestTableData = async () => {
  tableData.value = await mockSyncRequest([
    {
      id: '129871221298712212987122129871221298712212987122',
      name: 'Tom',
      amount1: '234',
      amount2: '3.2',
      amount3: 10
    },
    {
      id: '12987123',
      name: 'Tom',
      amount1: '165',
      amount2: '4.43',
      amount3: 12
    },
    {
      id: '12987124',
      name: 'Tom',
      amount1: '324',
      amount2: '1.9',
      amount3: 9
    },
    {
      id: '12987125',
      name: 'Tom',
      amount1: '621',
      amount2: '2.2',
      amount3: 17
    },
    {
      id: '12987126',
      name: 'Tom',
      amount1: '539',
      amount2: '4.1',
      amount3: 15
    }
  ])
}

onMounted(() => {
  requestTableData()
})
</script>

<style scoped>
.box {
  height: 400px;
}
</style>

树形数据与懒加载

树形数据

2016-05-02	wangxiaohu	No. 189, Grove St, Los Angeles
2016-05-04	wangxiaohu	No. 189, Grove St, Los Angeles
2016-05-01	wangxiaohu	No. 189, Grove St, Los Angeles
2016-05-01	wangxiaohu	No. 189, Grove St, Los Angeles
2016-05-01	wangxiaohu	No. 189, Grove St, Los Angeles
2016-05-03	wangxiaohu	No. 189, Grove St, Los Angeles

懒加载

2016-05-02	wangxiaohu	No. 189, Grove St, Los Angeles
2016-05-04	wangxiaohu	No. 189, Grove St, Los Angeles
2016-05-01	wangxiaohu	No. 189, Grove St, Los Angeles
2016-05-03	wangxiaohu	No. 189, Grove St, Los Angeles

<template>
  <h1>树形数据</h1>
  <div class="box">
    <pin-table
      :table-data="tableData"
      :table-props="tableProps"
      :table-column-props="tableColumnProps"
      :show-pagination="false"
    />
  </div>
  <h1>懒加载</h1>
  <div class="box">
    <pin-table
      :table-data="tableLazyData"
      :table-props="tableLazyProps"
      :table-column-props="tableColumnProps"
      :show-pagination="false"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { TableColumnProps } from 'pinos-ui'

interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]
}

const tableData = ref<Record<string, any>[]>([])
const tableProps = ref<Record<string, any>>({
  'row-key': 'id'
})
const tableColumnProps = ref<TableColumnProps[]>([
  {
    label: 'Date',
    prop: 'date'
  },
  {
    label: 'Name',
    prop: 'name'
  },
  {
    label: 'Address',
    prop: 'address',
    showOverflowTooltip: true
  }
])

const tableLazyData = ref<Record<string, any>[]>([{
  id: 1,
  date: '2016-05-02',
  name: 'wangxiaohu',
  address: 'No. 189, Grove St, Los Angeles'
},
{
  id: 2,
  date: '2016-05-04',
  name: 'wangxiaohu',
  address: 'No. 189, Grove St, Los Angeles'
},
{
  id: 3,
  date: '2016-05-01',
  name: 'wangxiaohu',
  hasChildren: true,
  address: 'No. 189, Grove St, Los Angeles'
},
{
  id: 4,
  date: '2016-05-03',
  name: 'wangxiaohu',
  address: 'No. 189, Grove St, Los Angeles'
}])
const load = (
  row: User,
  treeNode: unknown,
  resolve: (date: User[]) => void
) => {
  setTimeout(() => {
    resolve([
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles'
      }
    ])
  }, 1000)
}
const tableLazyProps = ref<Record<string, any>>({
  'row-key': 'id',
  'lazy': true,
  'load': load,
  'tree-props': { children: 'children', hasChildren: 'hasChildren' }
})

const mockSyncRequest = (data: any[], time = 1000): Promise<any[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data)
    }, time)
  })
}

const requestTableData = async () => {
  tableData.value = await mockSyncRequest([
    {
      id: 1,
      date: '2016-05-02',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      id: 2,
      date: '2016-05-04',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      id: 3,
      date: '2016-05-01',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles',
      children: [
        {
          id: 31,
          date: '2016-05-01',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles'
        },
        {
          id: 32,
          date: '2016-05-01',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles'
        }
      ]
    },
    {
      id: 4,
      date: '2016-05-03',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles'
    }
  ])
}

onMounted(() => {
  requestTableData()
})
</script>

<style scoped>
.box {
  height: 400px;
}
</style>

合并行或列

合并行

12987122		234	3.2	10
12987123	Tom	165	4.43	12
12987124		324	1.9	9
12987125	Tom	621	2.2	17
12987126		539	4.1	15

合并列

12987122	Tom	234	3.2	10
12987122	Tom	165	4.43	12
12987124	Tom	324	1.9	9
12987124	Tom	621	2.2	17
12987126	Tom	539	4.1	15

<template>
  <h1>合并行</h1>
  <div class="box">
    <pin-table
      :table-data="tableData"
      :table-props="tableProps"
      :table-column-props="tableColumnProps"
      :show-pagination="false"
    />
  </div>
  <h1>合并列</h1>
  <div class="box">
    <pin-table
      :table-data="tableData"
      :table-props="tableProps2"
      :table-column-props="tableColumnProps"
      :show-pagination="false"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { TableColumnProps } from 'pinos-ui'

interface User {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}

interface SpanMethodProps {
  row: User
  column: any
  rowIndex: number
  columnIndex: number
}

const tableData = ref<Record<string, any>[]>([])
const arraySpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex
}: SpanMethodProps) => {
  if (rowIndex % 2 === 0) {
    if (columnIndex === 0)
      return [1, 2]
    else if (columnIndex === 1)
      return [0, 0]
  }
}
const tableProps = ref<Record<string, any>>({
  'span-method': arraySpanMethod,
  'border': true
})
const tableColumnProps = ref<TableColumnProps[]>([
  {
    label: 'ID',
    prop: 'id',
    width: '180px'
  },
  {
    label: 'Name',
    prop: 'name'
  },
  {
    label: 'Amount 1',
    prop: 'amount1'

  },
  {
    label: 'Amount 2',
    prop: 'amount2'
  },
  {
    label: 'Amount 3',
    prop: 'amount3'
  }
])
const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex
}: SpanMethodProps) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
const tableProps2 = ref<Record<string, any>>({
  'span-method': objectSpanMethod,
  'border': true
})

const mockSyncRequest = (data: any[], time = 1000): Promise<any[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data)
    }, time)
  })
}

const requestTableData = async () => {
  tableData.value = await mockSyncRequest([
    {
      id: '12987122',
      name: 'Tom',
      amount1: '234',
      amount2: '3.2',
      amount3: 10
    },
    {
      id: '12987123',
      name: 'Tom',
      amount1: '165',
      amount2: '4.43',
      amount3: 12
    },
    {
      id: '12987124',
      name: 'Tom',
      amount1: '324',
      amount2: '1.9',
      amount3: 9
    },
    {
      id: '12987125',
      name: 'Tom',
      amount1: '621',
      amount2: '2.2',
      amount3: 17
    },
    {
      id: '12987126',
      name: 'Tom',
      amount1: '539',
      amount2: '4.1',
      amount3: 15
    }
  ])
}

onMounted(() => {
  requestTableData()
})
</script>

<style scoped>
.box {
  height: 400px;
}
</style>

多级表头并自定义某个单元格的内容

2016-05-03	Tom	California	Los Angeles	No. 189, Grove St, Los Angeles	自定义cell CA 90036
2016-05-02	Tom	California	Los Angeles	No. 189, Grove St, Los Angeles	自定义cell CA 90036
2016-05-04	Tom	California	Los Angeles	No. 189, Grove St, Los Angeles	自定义cell CA 90036
2016-05-01	Tom	California	Los Angeles	No. 189, Grove St, Los Angeles	自定义cell CA 90036
2016-05-08	Tom	California	Los Angeles	No. 189, Grove St, Los Angeles	自定义cell CA 90036
2016-05-06	Tom	California	Los Angeles	No. 189, Grove St, Los Angeles	自定义cell CA 90036
2016-05-07	Tom	California	Los Angeles	No. 189, Grove St, Los Angeles	自定义cell CA 90036

提示通过配置嵌套 tableColumnProps 和 cellSlot 来实现

<template>
  <div class="box">
    <pin-table
      :table-data="tableData"
      :table-column-props="tableColumnProps"
      :show-pagination="false"
    >
      <template #zipCell="scope">
        <p>
          自定义cell {{ scope.data.zip }}
        </p>
      </template>
    </pin-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { TableColumnProps } from 'pinos-ui'

const tableData = ref<Record<string, any>[]>([])
const tableColumnProps = ref<TableColumnProps[]>([
  {
    label: 'Date',
    prop: 'date',
    width: '150'
  },
  {
    label: 'Delivery Info',
    tableColumnProps: [{
      label: 'Name',
      prop: 'name',
      width: '120'
    }, {
      label: 'Address Info',
      tableColumnProps: [{
        label: 'State',
        prop: 'state',
        width: '120'
      }, {
        label: 'City',
        prop: 'city',
        width: '120'
      }, {
        label: 'Address',
        prop: 'address'
      }, {
        label: 'Zip',
        // prop: 'zip',
        cellSlot: 'zipCell',
        width: '120'
      }]
    }]
  }
])

const mockSyncRequest = (data: any[], time = 1000): Promise<any[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data)
    }, time)
  })
}

const requestTableData = async () => {
  tableData.value = await mockSyncRequest([
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-08',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-06',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-07',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    }
  ])
}

onMounted(() => {
  requestTableData()
})
</script>

<style scoped>
.box {
  height: 400px;
}
</style>

索引（默认会根据分页自动累加）

1	129871221298712212987122129871221298712212987122	Tom	234	3.2	10
2	12987123	Tom	165	4.43	12

共 5 条

前往

页

提示组件内部已经默认配置了相关逻辑，因此用户无需额外配置index属性

<template>
  <div class="box">
    <pin-table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      v-model:total="total"
      :table-data="tableData"
      :table-column-props="tableColumnProps"
      :update-methods="requestTableData"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { TableColumnProps } from 'pinos-ui'

const currentPage = ref(1)
const pageSize = ref(2)
const total = ref(0)
const tableData = ref<Record<string, any>[]>([])
const tableColumnProps = ref<TableColumnProps[]>([
  {
    type: 'index',
    width: '60px',
    label: '序号'
  },
  {
    label: 'id',
    prop: 'id',
    showOverflowTooltip: true
  },
  {
    label: 'Name',
    prop: 'name',
    width: '104px'
  },
  {
    label: 'amount1',
    prop: 'amount1',
    showOverflowTooltip: true
  },
  {
    label: 'amount2',
    prop: 'amount2',
    width: '104px'
  },
  {
    label: 'amount3',
    prop: 'amount3',
    showOverflowTooltip: true
  }
])

const mockSyncRequest = (data: any[], time = 1000): Promise<any[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data)
    }, time)
  })
}

const requestTableData = async () => {
  const list = await mockSyncRequest([
    {
      id: '129871221298712212987122129871221298712212987122',
      name: 'Tom',
      amount1: '234',
      amount2: '3.2',
      amount3: 10
    },
    {
      id: '12987123',
      name: 'Tom',
      amount1: '165',
      amount2: '4.43',
      amount3: 12
    },
    {
      id: '12987124',
      name: 'Tom',
      amount1: '324',
      amount2: '1.9',
      amount3: 9
    },
    {
      id: '12987125',
      name: 'Tom',
      amount1: '621',
      amount2: '2.2',
      amount3: 17
    },
    {
      id: '12987126',
      name: 'Tom',
      amount1: '539',
      amount2: '4.1',
      amount3: 15
    }
  ])
  const start = (currentPage.value - 1) * pageSize.value
  const end = Math.min(start + pageSize.value, list.length)
  tableData.value = list.slice(start, end)
  total.value = 5
}

onMounted(() => {
  requestTableData()
})
</script>

<style scoped>
.box {
  height: 400px;
}

.text-red {
  color: red;
}
</style>

事件绑定

绑定了 row-click 事件，请点击某一行，试试效果

129871221298712212987122129871221298712212987122	Tom	234	3.2	10
12987123	Tom	165	4.43	12
12987124	Tom	324	1.9	9
12987125	Tom	621	2.2	17
12987126	Tom	539	4.1	15

提示配置tableEvent

<template>
  <div class="box">
    <h4>绑定了 row-click 事件， 请点击某一行，试试效果</h4>
    <pin-table
      :table-data="tableData"
      :table-events="tableEvent"
      :table-column-props="tableColumnProps"
      :show-pagination="false"
    />
  </div>
</template>

<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
import { ref, onMounted, h } from 'vue'
import type { TableColumnProps } from 'pinos-ui'

const tableData = ref<Record<string, any>[]>([])
const tableColumnProps = ref<TableColumnProps[]>([
  {
    label: 'id',
    prop: 'id',
    showOverflowTooltip: true
  },
  {
    label: 'Name',
    prop: 'name',
    width: '104px'

  },
  {
    label: 'amount1',
    prop: 'amount1',
    showOverflowTooltip: true
  },
  {
    label: 'amount2',
    prop: 'amount2',
    width: '104px'

  },
  {
    label: 'amount3',
    prop: 'amount3',
    showOverflowTooltip: true
  }
])
const tableEvent = ref({
  'row-click': (row, column) => {
    ElMessageBox({
      title: '点击事件',
      message: h('div', null, [
        h('p', null, `row: ${JSON.stringify(row)}`),
        h('p', null, `column: ${JSON.stringify(column)}`)
      ])
    })
  }
})

const mockSyncRequest = (data: any[], time = 1000): Promise<any[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data)
    }, time)
  })
}

const requestTableData = async () => {
  tableData.value = await mockSyncRequest([
    {
      id: '129871221298712212987122129871221298712212987122',
      name: 'Tom',
      amount1: '234',
      amount2: '3.2',
      amount3: 10
    },
    {
      id: '12987123',
      name: 'Tom',
      amount1: '165',
      amount2: '4.43',
      amount3: 12
    },
    {
      id: '12987124',
      name: 'Tom',
      amount1: '324',
      amount2: '1.9',
      amount3: 9
    },
    {
      id: '12987125',
      name: 'Tom',
      amount1: '621',
      amount2: '2.2',
      amount3: 17
    },
    {
      id: '12987126',
      name: 'Tom',
      amount1: '539',
      amount2: '4.1',
      amount3: 15
    }
  ])
}

onMounted(() => {
  requestTableData()
})
</script>

<style scoped>
.box {
  height: 400px;
}

.text-red {
  color: red;
}
</style>

空插槽

自定义数据为空的内容

<template>
  <div class="box">
    <pin-table
      :table-data="tableData"
      :table-column-props="tableColumnProps"
      :show-pagination="false"
    >
      <template #empty>
        <span class="text-red">自定义数据为空的内容</span>
      </template>
    </pin-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TableColumnProps } from 'pinos-ui'

const tableData = ref<Record<string, any>[]>([])
const tableColumnProps = ref<TableColumnProps[]>([
  {
    label: 'id',
    prop: 'id',
    showOverflowTooltip: true
  },
  {
    label: 'Name',
    prop: 'name',
    width: '104px'

  },
  {
    label: 'amount1',
    prop: 'amount1',
    showOverflowTooltip: true
  },
  {
    label: 'amount2',
    prop: 'amount2',
    width: '104px'
  },
  {
    label: 'amount3',
    prop: 'amount3',
    showOverflowTooltip: true
  }
])
</script>

<style scoped>
.box {
  height: 400px;
}

.text-red {
  color: red;
}
</style>

空插槽(prop配置的形式)，该配置的应用场景一般配合 config-provide 使用，用于配置全局的空状态

暂无数据

提示empty 插槽的优先级会比该选项高

<template>
  <div class="box">
    <pin-table
      :table-data="tableData"
      :table-column-props="tableColumnProps"
      :show-pagination="false"
      :empty-render="emptyRender"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, h, resolveComponent } from 'vue'
import type { TableColumnProps } from 'pinos-ui'

const emptyRender = () => {
  return h(resolveComponent('ElEmpty'), {
    description: '暂无数据'
  })
}
const tableData = ref<Record<string, any>[]>([])
const tableColumnProps = ref<TableColumnProps[]>([
  {
    label: 'id',
    prop: 'id',
    showOverflowTooltip: true
  },
  {
    label: 'Name',
    prop: 'name',
    width: '104px'

  },
  {
    label: 'amount1',
    prop: 'amount1',
    showOverflowTooltip: true
  },
  {
    label: 'amount2',
    prop: 'amount2',
    width: '104px'

  },
  {
    label: 'amount3',
    prop: 'amount3',
    showOverflowTooltip: true
  }
])
</script>

<style scoped>
.box {
  height: 400px;
}

.text-red {
  color: red;
}
</style>

删除某一列

当总页数小于等于 1 时，不会调用刷新函数，而是直接删除当前列。当总页数大于 1 且非最后一页时，则会自动请求接口来更新列表

1	129871221298712212987122129871221298712212987122	Tom	234	3.2	10
2	12987123	Tom	165	4.43	12

共 5 条

前往

页

<template>
  <div class="box">
    <pin-table
      ref="tableInstance"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      v-model:total="total"
      :table-data="tableData"
      :table-column-props="tableColumnProps"
      :update-methods="requestTableData"
    >
      <template #operate>
        <el-table-column
          width="140px"
          label="操作"
          align="left"
        >
          <template #default="scope">
            <el-button
              link
              @click="handleDelete(scope)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </template>
    </pin-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { TableInstance, TableColumnProps } from 'pinos-ui'

const currentPage = ref(1)
const pageSize = ref(2)
const total = ref(0)
const tableData = ref<Record<string, any>[]>([])
const tableColumnProps = ref<TableColumnProps[]>([
  {
    type: 'index',
    width: '60px',
    label: '序号'
  },
  {
    label: 'id',
    prop: 'id',
    showOverflowTooltip: true
  },
  {
    label: 'Name',
    prop: 'name',
    width: '104px'

  },
  {
    label: 'amount1',
    prop: 'amount1',
    showOverflowTooltip: true
  },
  {
    label: 'amount2',
    prop: 'amount2',
    width: '104px'

  },
  {
    label: 'amount3',
    prop: 'amount3',
    showOverflowTooltip: true
  },
  {
    columnSlot: 'operate'
  }
])
const tableInstance = ref<TableInstance | null>(null)
const deleteCount = ref(0)

const mockSyncRequest = (data: any[], time = 1000): Promise<any[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data)
    }, time)
  })
}

const requestTableData = async () => {
  const res = [
    {
      id: '129871221298712212987122129871221298712212987122',
      name: 'Tom',
      amount1: '234',
      amount2: '3.2',
      amount3: 10
    },
    {
      id: '12987123',
      name: 'Tom',
      amount1: '165',
      amount2: '4.43',
      amount3: 12
    },
    {
      id: '12987124',
      name: 'Tom',
      amount1: '324',
      amount2: '1.9',
      amount3: 9
    },
    {
      id: '12987125',
      name: 'Tom',
      amount1: '621',
      amount2: '2.2',
      amount3: 17
    },
    {
      id: '12987126',
      name: 'Tom',
      amount1: '539',
      amount2: '4.1',
      amount3: 15
    }
  ]
  res.splice(0, deleteCount.value)
  total.value = res.length
  const list = await mockSyncRequest(res)
  console.log('currentPage: ', currentPage.value)
  const start = (currentPage.value - 1) * pageSize.value
  const end = Math.min(start + pageSize.value, list.length)
  console.log('最终的数组：', start, end, list.slice(start, end))
  tableData.value = list.slice(start, end)
}

const handleDelete = (data: any) => {
  try {
    // 请求删除的接口 ...
    deleteCount.value++

    const index = data.$index as number
    if (tableInstance.value)
      tableInstance.value.deleteRow(tableData, index)
  } catch (err) {
    console.error(err)
  }
}

onMounted(() => {
  requestTableData()
})
</script>

<style scoped>
.box {
  height: 400px;
}

.text-red {
  color: red;
}
</style>

config-provide 全局配置table组件

129871221298712212987122129871221298712212987122	Tom	234	3.2	10
12987123	Tom	165	4.43	12
12987124	Tom	324	1.9	9
12987125	Tom	621	2.2	17
12987126	Tom	539	4.1	15

提示该用例全局配置了table的border属性和数据为空时的渲染组件

<template>
  <div class="box">
    <el-button @click="tableData=[]">
      清空数据
    </el-button>
    <pin-config-provider :props="providerProps">
      <pin-table
        :table-data="tableData"
        :table-column-props="tableColumnProps"
        :show-pagination="false"
      />
    </pin-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { ref, h, resolveComponent } from 'vue'
import type { TableColumnProps, PropsOptions } from 'pinos-ui'

const providerProps: PropsOptions = {
  table: {
    tableProps: {
      border: true
    },
    emptyRender: () => {
      return [h(resolveComponent('ElEmpty'), {
        description: 'config-provider 自定义'
      })]
    }
  }
}
const tableData = ref<Record<string, any>[]>([{
  id: '129871221298712212987122129871221298712212987122',
  name: 'Tom',
  amount1: '234',
  amount2: '3.2',
  amount3: 10
},
{
  id: '12987123',
  name: 'Tom',
  amount1: '165',
  amount2: '4.43',
  amount3: 12
},
{
  id: '12987124',
  name: 'Tom',
  amount1: '324',
  amount2: '1.9',
  amount3: 9
},
{
  id: '12987125',
  name: 'Tom',
  amount1: '621',
  amount2: '2.2',
  amount3: 17
},
{
  id: '12987126',
  name: 'Tom',
  amount1: '539',
  amount2: '4.1',
  amount3: 15
}])
const tableColumnProps = ref<TableColumnProps[]>([
  {
    label: 'id',
    prop: 'id'
  },
  {
    label: 'Name',
    prop: 'name',
    width: '104px'

  },
  {
    label: 'amount1',
    prop: 'amount1'
  },
  {
    label: 'amount2',
    prop: 'amount2',
    width: '104px'

  },
  {
    label: 'amount3',
    prop: 'amount3'
  }
])
</script>

<style scoped>
.box {
  height: 400px;
}

.text-red {
  color: red;
}
</style>

综合使用

如果配置了 update-methods 属性，在分页触发 size-change 和 current-change 时会自动调用 table 的更新数据方法

129871221298712212987122129871221298712212987122	Tom	234	3.2	10	展示当前完整的数据 { "id": "129871221298712212987122129871221298712212987122", "name": "Tom", "amount1": "234", "amount2": "3.2", "amount3": 10 }
12987123	Tom	165	4.43	12	展示当前完整的数据 { "id": "12987123", "name": "Tom", "amount1": "165", "amount2": "4.43", "amount3": 12 }
12987124	Tom	324	1.9	9	展示当前完整的数据 { "id": "12987124", "name": "Tom", "amount1": "324", "amount2": "1.9", "amount3": 9 }
12987125	Tom	621	2.2	17	展示当前完整的数据 { "id": "12987125", "name": "Tom", "amount1": "621", "amount2": "2.2", "amount3": 17 }
12987126	Tom	539	4.1	15	展示当前完整的数据 { "id": "12987126", "name": "Tom", "amount1": "539", "amount2": "4.1", "amount3": 15 }

共 100 条

前往

页

提示该事例包含了列插槽和单元格插槽的用例

<template>
  <el-button @click="handleChange">
    {{ hasSelected ? '去除多选列' : '新增多选列' }}
  </el-button>
  <div class="box">
    <pin-table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      v-model:total="total"
      :table-data="tableData"
      :table-column-props="tableColumnProps"
      :update-methods="requestTableData"
    >
      <template #customCell="scope">
        <div>
          <p>展示当前完整的数据</p>
          <p>{{ scope.data || '---' }}</p>
        </div>
      </template>

      <template #operate>
        <el-table-column
          width="140px"
          label="操作"
          align="left"
        >
          <template #default="scope">
            <el-button
              link
              @click="handleClick(scope)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </template>
    </pin-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, computed } from 'vue'
import type { TableColumnProps } from 'pinos-ui'

const tableData = ref<Record<string, any>[]>([])
const tableColumnProps = ref<TableColumnProps[]>([
  {
    type: 'selection',
    width: '55'
  },
  {
    label: 'id',
    prop: 'id',
    showOverflowTooltip: true
  },
  {
    label: 'Name',
    prop: 'name',
    showOverflowTooltip: true
  },
  {
    label: 'amount1',
    prop: 'amount1',
    sortable: true,
    showOverflowTooltip: true
  },
  {
    label: 'amount2',
    prop: 'amount2',
    width: '104px',
    showOverflowTooltip: true
  },
  {
    label: 'amount3',
    prop: 'amount3',
    showOverflowTooltip: true

  },
  {
    label: '自定义cell',
    cellSlot: 'customCell',
    width: '200px'
  },
  {
    columnSlot: 'operate'
  }
])
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(100)

const hasSelected = computed(() => {
  return tableColumnProps.value.some(item => item.type)
})

const mockSyncRequest = (data: any[], time = 1000): Promise<any[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data)
    }, time)
  })
}

const requestTableData = async () => {
  tableData.value = await mockSyncRequest([
    {
      id: '129871221298712212987122129871221298712212987122',
      name: 'Tom',
      amount1: '234',
      amount2: '3.2',
      amount3: 10
    },
    {
      id: '12987123',
      name: 'Tom',
      amount1: '165',
      amount2: '4.43',
      amount3: 12
    },
    {
      id: '12987124',
      name: 'Tom',
      amount1: '324',
      amount2: '1.9',
      amount3: 9
    },
    {
      id: '12987125',
      name: 'Tom',
      amount1: '621',
      amount2: '2.2',
      amount3: 17
    },
    {
      id: '12987126',
      name: 'Tom',
      amount1: '539',
      amount2: '4.1',
      amount3: 15
    }
  ])
}

const handleClick = (data: any) => {
  console.log(data)
}

const handleChange = () => {
  if (hasSelected.value) {
    tableColumnProps.value.splice(0, 1)
  } else {
    tableColumnProps.value.unshift({
      type: 'selection',
      width: '55'
    })
  }
}

watch(currentPage, (val: number) => {
  console.log(val, '=val==')
})

onMounted(() => {
  requestTableData()
})
</script>

<style scoped>
.box {
  height: 600px;
}
</style>

Table 属性

属性名	说明	类型	必传	默认值	是否可以全局配置
tableData	table绑定的数据	any[]	是	[]	否
tableProps	table组件的props 以 elementPlus 配置为例	object	否	{}	是
tableEvents	table组件的事件配置以 elementPlus 配置为例	object	否	{}	否
tableColumnKey	渲染列表的key默认是数组下标，但是如果存在对列的新增和删除，为了有良好的性能，可以传入一个基于 tableData 的唯一的key值	string	否	''	否
tableColumnProps	table列的props 以 elementPlus 配置为例	TableColumnProps[]	是	[]	否
showPagination	是否展示分页	boolean	否	true	否
currentPage / v-model:current-page	分页的 currentPage	number	否	1	否
pageSize / v-model:page-size	分页的 pageSize	number	否	20	是
total / v-model:total	分页的 total	number	否	0	否
paginationOptions	pagination的props 以 elementPlus 配置为例	object	否	{}	是
updateMethods	分页触发的更新table数据的函数	function	否	-	否
emptyRender	数据为空时的渲染函数， empty 插槽的优先级会比该选项高（即empty插槽会覆盖该选项）	() => VNode[]	否	h('span', '暂无数据')	是
componentsConfig	配置 table 组件，tableColumn 组件，pagination 组件的组件名	object	否	pagination: 'el-pagination', table: 'el-table', tableColumn: 'el-table-column'	否

TableColumnProps

该属性在 tableColumn 的 props 配置的基础上扩展了以下几个属性：

属性名	说明	类型	必传	默认值
cellSlot	单元格的插槽名	string	否	-
columnSlot	table列的插槽名	string	否	-
customHeaderSlot	自定义表头的插槽名	string	否	-
tableColumnProps	嵌套 tableColumn 的配置项（多用于多级表头）	TableColumnProps[]	否	-

Table 插槽

插槽名	说明
empty	当数据为空时自定义的内容

Table 组件实例方法

方法名	说明	参数	默认值	返回值
deleteRow	删除某一行	list: MaybeRef<T[]>, index: number	-	void

Date	Delivery Info
	Name	Address Info
	Name	State	City	Address	Zip

table ​

介绍 ​

背景 ​

代码示例 ​

自定义表头 ​

展开行 ​

树形数据与懒加载 ​

树形数据

懒加载

合并行或列 ​

合并行

合并列

多级表头并自定义某个单元格的内容 ​

索引（默认会根据分页自动累加） ​

事件绑定 ​

绑定了 row-click 事件， 请点击某一行，试试效果

空插槽 ​

空插槽(prop配置的形式)，该配置的应用场景一般配合 config-provide 使用，用于配置全局的空状态 ​

删除某一列 ​

config-provide 全局配置table组件 ​

综合使用 ​

Table 属性 ​

TableColumnProps ​

Table 插槽 ​

Table 组件实例方法 ​