Table 表格

用于展示多条结构类似的数据， 可对数据进行排序、筛选、对比或其他自定义操作。

基础表格

基础的表格展示用法。

当 el-table 元素中注入 data 对象数组后，在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据，用 label 属性来定义表格的列名。 可以使用 width 属性来定义列宽。

Table 表格 - 图1

  1. <template>
  2.   <el-table :data="tableData" style="width: 100%">
  3.     <el-table-column prop="date" label="Date" width="180" />
  4.     <el-table-column prop="name" label="Name" width="180" />
  5.     <el-table-column prop="address" label="Address" />
  6.   </el-table>
  7. </template>
  9. <script lang="ts" setup>
  10. const tableData = [
  11.   {
  12.     date: '2016-05-03',
  13.     name: 'Tom',
  14.     address: 'No. 189, Grove St, Los Angeles',
  15.   },
  16.   {
  17.     date: '2016-05-02',
  18.     name: 'Tom',
  19.     address: 'No. 189, Grove St, Los Angeles',
  20.   },
  21.   {
  22.     date: '2016-05-04',
  23.     name: 'Tom',
  24.     address: 'No. 189, Grove St, Los Angeles',
  25.   },
  26.   {
  27.     date: '2016-05-01',
  28.     name: 'Tom',
  29.     address: 'No. 189, Grove St, Los Angeles',
  30.   },
  31. ]
  32. </script>

带斑马纹表格

使用带斑马纹的表格，可以更容易区分出不同行的数据。

stripe 属性可以创建带斑马纹的表格。 如果 true, 表格将会带有斑马纹。

Table 表格 - 图2

  1. <template>
  2.   <el-table :data="tableData" stripe style="width: 100%">
  3.     <el-table-column prop="date" label="Date" width="180" />
  4.     <el-table-column prop="name" label="Name" width="180" />
  5.     <el-table-column prop="address" label="Address" />
  6.   </el-table>
  7. </template>
  9. <script lang="ts" setup>
  10. const tableData = [
  11.   {
  12.     date: '2016-05-03',
  13.     name: 'Tom',
  14.     address: 'No. 189, Grove St, Los Angeles',
  15.   },
  16.   {
  17.     date: '2016-05-02',
  18.     name: 'Tom',
  19.     address: 'No. 189, Grove St, Los Angeles',
  20.   },
  21.   {
  22.     date: '2016-05-04',
  23.     name: 'Tom',
  24.     address: 'No. 189, Grove St, Los Angeles',
  25.   },
  26.   {
  27.     date: '2016-05-01',
  28.     name: 'Tom',
  29.     address: 'No. 189, Grove St, Los Angeles',
  30.   },
  31. ]
  32. </script>

带边框表格

默认情况下，Table 组件是不具有竖直方向的边框的， 如果需要，可以使用 border 属性，把该属性设置为 true 即可启用。

Table 表格 - 图3

  1. <template>
  2.   <el-table :data="tableData" border style="width: 100%">
  3.     <el-table-column prop="date" label="Date" width="180" />
  4.     <el-table-column prop="name" label="Name" width="180" />
  5.     <el-table-column prop="address" label="Address" />
  6.   </el-table>
  7. </template>
  9. <script lang="ts" setup>
  10. const tableData = [
  11.   {
  12.     date: '2016-05-03',
  13.     name: 'Tom',
  14.     address: 'No. 189, Grove St, Los Angeles',
  15.   },
  16.   {
  17.     date: '2016-05-02',
  18.     name: 'Tom',
  19.     address: 'No. 189, Grove St, Los Angeles',
  20.   },
  21.   {
  22.     date: '2016-05-04',
  23.     name: 'Tom',
  24.     address: 'No. 189, Grove St, Los Angeles',
  25.   },
  26.   {
  27.     date: '2016-05-01',
  28.     name: 'Tom',
  29.     address: 'No. 189, Grove St, Los Angeles',
  30.   },
  31. ]
  32. </script>

带状态表格

可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class， 表明该行处于某种状态。

Table 表格 - 图4

  1. <template>
  2.   <el-table
  3.     :data="tableData"
  4.     style="width: 100%"
  5.     :row-class-name="tableRowClassName"
  6.   >
  7.     <el-table-column prop="date" label="Date" width="180" />
  8.     <el-table-column prop="name" label="Name" width="180" />
  9.     <el-table-column prop="address" label="Address" />
  10.   </el-table>
  11. </template>
  13. <script lang="ts" setup>
  14. interface User {
  15.   date: string
  16.   name: string
  17.   address: string
  18. }
  20. const tableRowClassName = ({
  21.   row,
  22.   rowIndex,
  23. }: {
  24.   row: User
  25.   rowIndex: number
  26. }) => {
  27.   if (rowIndex === 1) {
  28.     return 'warning-row'
  29.   } else if (rowIndex === 3) {
  30.     return 'success-row'
  31.   }
  32.   return ''
  33. }
  35. const tableData: User[] = [
  36.   {
  37.     date: '2016-05-03',
  38.     name: 'Tom',
  39.     address: 'No. 189, Grove St, Los Angeles',
  40.   },
  41.   {
  42.     date: '2016-05-02',
  43.     name: 'Tom',
  44.     address: 'No. 189, Grove St, Los Angeles',
  45.   },
  46.   {
  47.     date: '2016-05-04',
  48.     name: 'Tom',
  49.     address: 'No. 189, Grove St, Los Angeles',
  50.   },
  51.   {
  52.     date: '2016-05-01',
  53.     name: 'Tom',
  54.     address: 'No. 189, Grove St, Los Angeles',
  55.   },
  56. ]
  57. </script>
  59. <style>
  60. .el-table .warning-row {
  61.   --el-table-tr-bg-color: var(--el-color-warning-light-9);
  62. }
  63. .el-table .success-row {
  64.   --el-table-tr-bg-color: var(--el-color-success-light-9);
  65. }
  66. </style>

固定表头

纵向内容过多时，可选择固定表头。

只要在 el-table 元素中定义了 height 属性，即可实现固定表头的表格，而不需要额外的代码。

Table 表格 - 图5

  1. <template>
  2.   <el-table :data="tableData" height="250" style="width: 100%">
  3.     <el-table-column prop="date" label="Date" width="180" />
  4.     <el-table-column prop="name" label="Name" width="180" />
  5.     <el-table-column prop="address" label="Address" />
  6.   </el-table>
  7. </template>
  9. <script lang="ts" setup>
  10. const tableData = [
  11.   {
  12.     date: '2016-05-03',
  13.     name: 'Tom',
  14.     address: 'No. 189, Grove St, Los Angeles',
  15.   },
  16.   {
  17.     date: '2016-05-02',
  18.     name: 'Tom',
  19.     address: 'No. 189, Grove St, Los Angeles',
  20.   },
  21.   {
  22.     date: '2016-05-04',
  23.     name: 'Tom',
  24.     address: 'No. 189, Grove St, Los Angeles',
  25.   },
  26.   {
  27.     date: '2016-05-01',
  28.     name: 'Tom',
  29.     address: 'No. 189, Grove St, Los Angeles',
  30.   },
  31.   {
  32.     date: '2016-05-08',
  33.     name: 'Tom',
  34.     address: 'No. 189, Grove St, Los Angeles',
  35.   },
  36.   {
  37.     date: '2016-05-06',
  38.     name: 'Tom',
  39.     address: 'No. 189, Grove St, Los Angeles',
  40.   },
  41.   {
  42.     date: '2016-05-07',
  43.     name: 'Tom',
  44.     address: 'No. 189, Grove St, Los Angeles',
  45.   },
  46. ]
  47. </script>

固定列

横向内容过多时，可选择固定列。

固定列需要使用 fixed 属性，它接受 Boolean 值 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。

Table 表格 - 图6

  1. <template>
  2.   <el-table :data="tableData" style="width: 100%">
  3.     <el-table-column fixed prop="date" label="Date" width="150" />
  4.     <el-table-column prop="name" label="Name" width="120" />
  5.     <el-table-column prop="state" label="State" width="120" />
  6.     <el-table-column prop="city" label="City" width="120" />
  7.     <el-table-column prop="address" label="Address" width="600" />
  8.     <el-table-column prop="zip" label="Zip" width="120" />
  9.     <el-table-column fixed="right" label="Operations" width="120">
  10.       <template #default>
  11.         <el-button link type="primary" size="small" @click="handleClick"
  12.           >Detail</el-button
  13.         >
  14.         <el-button link type="primary" size="small">Edit</el-button>
  15.       </template>
  16.     </el-table-column>
  17.   </el-table>
  18. </template>
  20. <script lang="ts" setup>
  21. const handleClick = () => {
  22.   console.log('click')
  23. }
  25. const tableData = [
  26.   {
  27.     date: '2016-05-03',
  28.     name: 'Tom',
  29.     state: 'California',
  30.     city: 'Los Angeles',
  31.     address: 'No. 189, Grove St, Los Angeles',
  32.     zip: 'CA 90036',
  33.     tag: 'Home',
  34.   },
  35.   {
  36.     date: '2016-05-02',
  37.     name: 'Tom',
  38.     state: 'California',
  39.     city: 'Los Angeles',
  40.     address: 'No. 189, Grove St, Los Angeles',
  41.     zip: 'CA 90036',
  42.     tag: 'Office',
  43.   },
  44.   {
  45.     date: '2016-05-04',
  46.     name: 'Tom',
  47.     state: 'California',
  48.     city: 'Los Angeles',
  49.     address: 'No. 189, Grove St, Los Angeles',
  50.     zip: 'CA 90036',
  51.     tag: 'Home',
  52.   },
  53.   {
  54.     date: '2016-05-01',
  55.     name: 'Tom',
  56.     state: 'California',
  57.     city: 'Los Angeles',
  58.     address: 'No. 189, Grove St, Los Angeles',
  59.     zip: 'CA 90036',
  60.     tag: 'Office',
  61.   },
  62. ]
  63. </script>

固定列和表头

横纵内容过多时，可选择固定列和表头。

固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。

Table 表格 - 图7

  1. <template>
  2.   <el-table :data="tableData" style="width: 100%" height="250">
  3.     <el-table-column fixed prop="date" label="Date" width="150" />
  4.     <el-table-column prop="name" label="Name" width="120" />
  5.     <el-table-column prop="state" label="State" width="120" />
  6.     <el-table-column prop="city" label="City" width="320" />
  7.     <el-table-column prop="address" label="Address" width="600" />
  8.     <el-table-column prop="zip" label="Zip" width="120" />
  9.   </el-table>
  10. </template>
  12. <script lang="ts" setup>
  13. const tableData = [
  14.   {
  15.     date: '2016-05-03',
  16.     name: 'Tom',
  17.     state: 'California',
  18.     city: 'Los Angeles',
  19.     address: 'No. 189, Grove St, Los Angeles',
  20.     zip: 'CA 90036',
  21.   },
  22.   {
  23.     date: '2016-05-02',
  24.     name: 'Tom',
  25.     state: 'California',
  26.     city: 'Los Angeles',
  27.     address: 'No. 189, Grove St, Los Angeles',
  28.     zip: 'CA 90036',
  29.   },
  30.   {
  31.     date: '2016-05-04',
  32.     name: 'Tom',
  33.     state: 'California',
  34.     city: 'Los Angeles',
  35.     address: 'No. 189, Grove St, Los Angeles',
  36.     zip: 'CA 90036',
  37.   },
  38.   {
  39.     date: '2016-05-01',
  40.     name: 'Tom',
  41.     state: 'California',
  42.     city: 'Los Angeles',
  43.     address: 'No. 189, Grove St, Los Angeles',
  44.     zip: 'CA 90036',
  45.   },
  46.   {
  47.     date: '2016-05-08',
  48.     name: 'Tom',
  49.     state: 'California',
  50.     city: 'Los Angeles',
  51.     address: 'No. 189, Grove St, Los Angeles',
  52.     zip: 'CA 90036',
  53.   },
  54.   {
  55.     date: '2016-05-06',
  56.     name: 'Tom',
  57.     state: 'California',
  58.     city: 'Los Angeles',
  59.     address: 'No. 189, Grove St, Los Angeles',
  60.     zip: 'CA 90036',
  61.   },
  62.   {
  63.     date: '2016-05-07',
  64.     name: 'Tom',
  65.     state: 'California',
  66.     city: 'Los Angeles',
  67.     address: 'No. 189, Grove St, Los Angeles',
  68.     zip: 'CA 90036',
  69.   },
  70. ]
  71. </script>

流体高度

当数据量动态变化时，可以为 Table 设置一个最大高度。

通过设置 max-height 属性为 Table 指定最大高度。 此时若表格所需的高度大于最大高度，则会显示一个滚动条。

Table 表格 - 图8

  1. <template>
  2.   <el-table :data="tableData" style="width: 100%" max-height="250">
  3.     <el-table-column fixed prop="date" label="Date" width="150" />
  4.     <el-table-column prop="name" label="Name" width="120" />
  5.     <el-table-column prop="state" label="State" width="120" />
  6.     <el-table-column prop="city" label="City" width="120" />
  7.     <el-table-column prop="address" label="Address" width="600" />
  8.     <el-table-column prop="zip" label="Zip" width="120" />
  9.     <el-table-column fixed="right" label="Operations" width="120">
  10.       <template #default="scope">
  11.         <el-button
  12.           link
  13.           type="primary"
  14.           size="small"
  15.           @click.prevent="deleteRow(scope.$index)"
  16.         >
  17.           Remove
  18.         </el-button>
  19.       </template>
  20.     </el-table-column>
  21.   </el-table>
  22.   <el-button class="mt-4" style="width: 100%" @click="onAddItem"
  23.     >Add Item</el-button
  24.   >
  25. </template>
  27. <script lang="ts" setup>
  28. import { ref } from 'vue'
  29. import dayjs from 'dayjs'
  31. const now = new Date()
  33. const tableData = ref([
  34.   {
  35.     date: '2016-05-01',
  36.     name: 'Tom',
  37.     state: 'California',
  38.     city: 'Los Angeles',
  39.     address: 'No. 189, Grove St, Los Angeles',
  40.     zip: 'CA 90036',
  41.   },
  42.   {
  43.     date: '2016-05-02',
  44.     name: 'Tom',
  45.     state: 'California',
  46.     city: 'Los Angeles',
  47.     address: 'No. 189, Grove St, Los Angeles',
  48.     zip: 'CA 90036',
  49.   },
  50.   {
  51.     date: '2016-05-03',
  52.     name: 'Tom',
  53.     state: 'California',
  54.     city: 'Los Angeles',
  55.     address: 'No. 189, Grove St, Los Angeles',
  56.     zip: 'CA 90036',
  57.   },
  58. ])
  60. const deleteRow = (index: number) => {
  61.   tableData.value.splice(index, 1)
  62. }
  64. const onAddItem = () => {
  65.   now.setDate(now.getDate() + 1)
  66.   tableData.value.push({
  67.     date: dayjs(now).format('YYYY-MM-DD'),
  68.     name: 'Tom',
  69.     state: 'California',
  70.     city: 'Los Angeles',
  71.     address: 'No. 189, Grove St, Los Angeles',
  72.     zip: 'CA 90036',
  73.   })
  74. }
  75. </script>

多级表头

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。

Table 表格 - 图9

  1. <template>
  2.   <el-table :data="tableData" style="width: 100%">
  3.     <el-table-column prop="date" label="Date" width="150" />
  4.     <el-table-column label="Delivery Info">
  5.       <el-table-column prop="name" label="Name" width="120" />
  6.       <el-table-column label="Address Info">
  7.         <el-table-column prop="state" label="State" width="120" />
  8.         <el-table-column prop="city" label="City" width="120" />
  9.         <el-table-column prop="address" label="Address" />
  10.         <el-table-column prop="zip" label="Zip" width="120" />
  11.       </el-table-column>
  12.     </el-table-column>
  13.   </el-table>
  14. </template>
  16. <script lang="ts" setup>
  17. const tableData = [
  18.   {
  19.     date: '2016-05-03',
  20.     name: 'Tom',
  21.     state: 'California',
  22.     city: 'Los Angeles',
  23.     address: 'No. 189, Grove St, Los Angeles',
  24.     zip: 'CA 90036',
  25.   },
  26.   {
  27.     date: '2016-05-02',
  28.     name: 'Tom',
  29.     state: 'California',
  30.     city: 'Los Angeles',
  31.     address: 'No. 189, Grove St, Los Angeles',
  32.     zip: 'CA 90036',
  33.   },
  34.   {
  35.     date: '2016-05-04',
  36.     name: 'Tom',
  37.     state: 'California',
  38.     city: 'Los Angeles',
  39.     address: 'No. 189, Grove St, Los Angeles',
  40.     zip: 'CA 90036',
  41.   },
  42.   {
  43.     date: '2016-05-01',
  44.     name: 'Tom',
  45.     state: 'California',
  46.     city: 'Los Angeles',
  47.     address: 'No. 189, Grove St, Los Angeles',
  48.     zip: 'CA 90036',
  49.   },
  50.   {
  51.     date: '2016-05-08',
  52.     name: 'Tom',
  53.     state: 'California',
  54.     city: 'Los Angeles',
  55.     address: 'No. 189, Grove St, Los Angeles',
  56.     zip: 'CA 90036',
  57.   },
  58.   {
  59.     date: '2016-05-06',
  60.     name: 'Tom',
  61.     state: 'California',
  62.     city: 'Los Angeles',
  63.     address: 'No. 189, Grove St, Los Angeles',
  64.     zip: 'CA 90036',
  65.   },
  66.   {
  67.     date: '2016-05-07',
  68.     name: 'Tom',
  69.     state: 'California',
  70.     city: 'Los Angeles',
  71.     address: 'No. 189, Grove St, Los Angeles',
  72.     zip: 'CA 90036',
  73.   },
  74. ]
  75. </script>

单选

选择单行数据时使用色块表示。

Table 组件提供了单选的支持， 只需要配置 highlight-current-row 属性即可实现单选。 之后由 current-change 事件来管理选中时触发的事件，它会传入 currentRow，oldCurrentRow。 如果需要显示索引，可以增加一列 el-table-column，设置 type 属性为 index 即可显示从 1 开始的索引号。

Table 表格 - 图10

  1. <template>
  2.   <el-table
  3.     ref="singleTableRef"
  4.     :data="tableData"
  5.     highlight-current-row
  6.     style="width: 100%"
  7.     @current-change="handleCurrentChange"
  8.   >
  9.     <el-table-column type="index" width="50" />
  10.     <el-table-column property="date" label="Date" width="120" />
  11.     <el-table-column property="name" label="Name" width="120" />
  12.     <el-table-column property="address" label="Address" />
  13.   </el-table>
  14.   <div style="margin-top: 20px">
  15.     <el-button @click="setCurrent(tableData[1])">Select second row</el-button>
  16.     <el-button @click="setCurrent()">Clear selection</el-button>
  17.   </div>
  18. </template>
  20. <script lang="ts" setup>
  21. import { ref } from 'vue'
  22. import { ElTable } from 'element-plus'
  24. interface User {
  25.   date: string
  26.   name: string
  27.   address: string
  28. }
  30. const currentRow = ref()
  31. const singleTableRef = ref<InstanceType<typeof ElTable>>()
  33. const setCurrent = (row?: User) => {
  34.   singleTableRef.value!.setCurrentRow(row)
  35. }
  36. const handleCurrentChange = (val: User | undefined) => {
  37.   currentRow.value = val
  38. }
  39. const tableData: User[] = [
  40.   {
  41.     date: '2016-05-03',
  42.     name: 'Tom',
  43.     address: 'No. 189, Grove St, Los Angeles',
  44.   },
  45.   {
  46.     date: '2016-05-02',
  47.     name: 'Tom',
  48.     address: 'No. 189, Grove St, Los Angeles',
  49.   },
  50.   {
  51.     date: '2016-05-04',
  52.     name: 'Tom',
  53.     address: 'No. 189, Grove St, Los Angeles',
  54.   },
  55.   {
  56.     date: '2016-05-01',
  57.     name: 'Tom',
  58.     address: 'No. 189, Grove St, Los Angeles',
  59.   },
  60. ]
  61. </script>

多选

你也可以选择多行。

实现多选非常简单: 手动添加一个 el-table-column，设 type 属性为 selection 即可； 除了多选，这里还使用到了 show-overflow-tooltip属性。 默认情况下，如果单元格内容过长，会占用多行显示。 若需要单行显示可以使用 show-overflow-tooltip 属性，它接受一个 Boolean， 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。

Table 表格 - 图11

  1. <template>
  2.   <el-table
  3.     ref="multipleTableRef"
  4.     :data="tableData"
  5.     style="width: 100%"
  6.     @selection-change="handleSelectionChange"
  7.   >
  8.     <el-table-column type="selection" width="55" />
  9.     <el-table-column label="Date" width="120">
  10.       <template #default="scope">{{ scope.row.date }}</template>
  11.     </el-table-column>
  12.     <el-table-column property="name" label="Name" width="120" />
  13.     <el-table-column property="address" label="Address" show-overflow-tooltip />
  14.   </el-table>
  15.   <div style="margin-top: 20px">
  16.     <el-button @click="toggleSelection([tableData[1], tableData[2]])"
  17.       >Toggle selection status of second and third rows</el-button
  18.     >
  19.     <el-button @click="toggleSelection()">Clear selection</el-button>
  20.   </div>
  21. </template>
  23. <script lang="ts" setup>
  24. import { ref } from 'vue'
  25. import { ElTable } from 'element-plus'
  27. interface User {
  28.   date: string
  29.   name: string
  30.   address: string
  31. }
  33. const multipleTableRef = ref<InstanceType<typeof ElTable>>()
  34. const multipleSelection = ref<User[]>([])
  35. const toggleSelection = (rows?: User[]) => {
  36.   if (rows) {
  37.     rows.forEach((row) => {
  38.       // TODO: improvement typing when refactor table
  39.       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  40.       // @ts-expect-error
  41.       multipleTableRef.value!.toggleRowSelection(row, undefined)
  42.     })
  43.   } else {
  44.     multipleTableRef.value!.clearSelection()
  45.   }
  46. }
  47. const handleSelectionChange = (val: User[]) => {
  48.   multipleSelection.value = val
  49. }
  51. const tableData: User[] = [
  52.   {
  53.     date: '2016-05-03',
  54.     name: 'Tom',
  55.     address: 'No. 189, Grove St, Los Angeles',
  56.   },
  57.   {
  58.     date: '2016-05-02',
  59.     name: 'Tom',
  60.     address: 'No. 189, Grove St, Los Angeles',
  61.   },
  62.   {
  63.     date: '2016-05-04',
  64.     name: 'Tom',
  65.     address: 'No. 189, Grove St, Los Angeles',
  66.   },
  67.   {
  68.     date: '2016-05-01',
  69.     name: 'Tom',
  70.     address: 'No. 189, Grove St, Los Angeles',
  71.   },
  72.   {
  73.     date: '2016-05-08',
  74.     name: 'Tom',
  75.     address: 'No. 189, Grove St, Los Angeles',
  76.   },
  77.   {
  78.     date: '2016-05-06',
  79.     name: 'Tom',
  80.     address: 'No. 189, Grove St, Los Angeles',
  81.   },
  82.   {
  83.     date: '2016-05-07',
  84.     name: 'Tom',
  85.     address: 'No. 189, Grove St, Los Angeles',
  86.   },
  87. ]
  88. </script>

排序

对表格进行排序，可快速查找或对比数据。

在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。 可以使用 sort-method 或者 sort-by 使用自定义的排序规则。 如果需要后端排序，需将 sortable 设置为 custom，同时在 Table 上监听 sort-change 事件， 在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 在本例中，我们还使用了 formatter 属性，它用于格式化指定列的值， 接受一个 Function，会传入两个参数：row 和 column， 可以根据自己的需求进行处理。

Table 表格 - 图12

  1. <template>
  2.   <el-table
  3.     :data="tableData"
  4.     :default-sort="{ prop: 'date', order: 'descending' }"
  5.     style="width: 100%"
  6.   >
  7.     <el-table-column prop="date" label="Date" sortable width="180" />
  8.     <el-table-column prop="name" label="Name" width="180" />
  9.     <el-table-column prop="address" label="Address" :formatter="formatter" />
  10.   </el-table>
  11. </template>
  13. <script lang="ts" setup>
  14. import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
  16. interface User {
  17.   date: string
  18.   name: string
  19.   address: string
  20. }
  22. const formatter = (row: User, column: TableColumnCtx<User>) => {
  23.   return row.address
  24. }
  26. const tableData: User[] = [
  27.   {
  28.     date: '2016-05-03',
  29.     name: 'Tom',
  30.     address: 'No. 189, Grove St, Los Angeles',
  31.   },
  32.   {
  33.     date: '2016-05-02',
  34.     name: 'Tom',
  35.     address: 'No. 189, Grove St, Los Angeles',
  36.   },
  37.   {
  38.     date: '2016-05-04',
  39.     name: 'Tom',
  40.     address: 'No. 189, Grove St, Los Angeles',
  41.   },
  42.   {
  43.     date: '2016-05-01',
  44.     name: 'Tom',
  45.     address: 'No. 189, Grove St, Los Angeles',
  46.   },
  47. ]
  48. </script>

筛选

对表格进行筛选，可快速查找到自己想看的数据。

在列中设置 filters 和 filter-method 属性即可开启该列的筛选， filters 是一个数组，filter-method 是一个方法，它用于决定某些数据是否显示， 会传入三个参数：value, row 和 column。

Table 表格 - 图13

  1. <template>
  2.   <el-button @click="resetDateFilter">reset date filter</el-button>
  3.   <el-button @click="clearFilter">reset all filters</el-button>
  4.   <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
  5.     <el-table-column
  6.       prop="date"
  7.       label="Date"
  8.       sortable
  9.       width="180"
  10.       column-key="date"
  11.       :filters="[
  12.         { text: '2016-05-01', value: '2016-05-01' },
  13.         { text: '2016-05-02', value: '2016-05-02' },
  14.         { text: '2016-05-03', value: '2016-05-03' },
  15.         { text: '2016-05-04', value: '2016-05-04' },
  16.       ]"
  17.       :filter-method="filterHandler"
  18.     />
  19.     <el-table-column prop="name" label="Name" width="180" />
  20.     <el-table-column prop="address" label="Address" :formatter="formatter" />
  22.     <el-table-column
  23.       prop="tag"
  24.       label="Tag"
  25.       width="100"
  26.       :filters="[
  27.         { text: 'Home', value: 'Home' },
  28.         { text: 'Office', value: 'Office' },
  29.       ]"
  30.       :filter-method="filterTag"
  31.       filter-placement="bottom-end"
  32.     >
  33.       <template #default="scope">
  34.         <el-tag
  35.           :type="scope.row.tag === 'Home' ? '' : 'success'"
  36.           disable-transitions
  37.           >{{ scope.row.tag }}</el-tag
  38.         >
  39.       </template>
  40.     </el-table-column>
  41.   </el-table>
  42. </template>
  44. <script lang="ts" setup>
  45. import { ref } from 'vue'
  46. import { ElTable } from 'element-plus'
  47. import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
  49. interface User {
  50.   date: string
  51.   name: string
  52.   address: string
  53.   tag: string
  54. }
  56. const tableRef = ref<InstanceType<typeof ElTable>>()
  58. const resetDateFilter = () => {
  59.   tableRef.value!.clearFilter(['date'])
  60. }
  61. // TODO: improvement typing when refactor table
  62. const clearFilter = () => {
  63.   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  64.   // @ts-expect-error
  65.   tableRef.value!.clearFilter()
  66. }
  67. const formatter = (row: User, column: TableColumnCtx<User>) => {
  68.   return row.address
  69. }
  70. const filterTag = (value: string, row: User) => {
  71.   return row.tag === value
  72. }
  73. const filterHandler = (
  74.   value: string,
  75.   row: User,
  76.   column: TableColumnCtx<User>
  77. ) => {
  78.   const property = column['property']
  79.   return row[property] === value
  80. }
  82. const tableData: User[] = [
  83.   {
  84.     date: '2016-05-03',
  85.     name: 'Tom',
  86.     address: 'No. 189, Grove St, Los Angeles',
  87.     tag: 'Home',
  88.   },
  89.   {
  90.     date: '2016-05-02',
  91.     name: 'Tom',
  92.     address: 'No. 189, Grove St, Los Angeles',
  93.     tag: 'Office',
  94.   },
  95.   {
  96.     date: '2016-05-04',
  97.     name: 'Tom',
  98.     address: 'No. 189, Grove St, Los Angeles',
  99.     tag: 'Home',
  100.   },
  101.   {
  102.     date: '2016-05-01',
  103.     name: 'Tom',
  104.     address: 'No. 189, Grove St, Los Angeles',
  105.     tag: 'Office',
  106.   },
  107. ]
  108. </script>

自定义列模板

自定义列的显示内容，可组合其他组件使用。

通过 slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。

Table 表格 - 图14

  1. <template>
  2.   <el-table :data="tableData" style="width: 100%">
  3.     <el-table-column label="Date" width="180">
  4.       <template #default="scope">
  5.         <div style="display: flex; align-items: center">
  6.           <el-icon><timer /></el-icon>
  7.           <span style="margin-left: 10px">{{ scope.row.date }}</span>
  8.         </div>
  9.       </template>
  10.     </el-table-column>
  11.     <el-table-column label="Name" width="180">
  12.       <template #default="scope">
  13.         <el-popover effect="light" trigger="hover" placement="top" width="auto">
  14.           <template #default>
  15.             <div>name: {{ scope.row.name }}</div>
  16.             <div>address: {{ scope.row.address }}</div>
  17.           </template>
  18.           <template #reference>
  19.             <el-tag>{{ scope.row.name }}</el-tag>
  20.           </template>
  21.         </el-popover>
  22.       </template>
  23.     </el-table-column>
  24.     <el-table-column label="Operations">
  25.       <template #default="scope">
  26.         <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
  27.           >Edit</el-button
  28.         >
  29.         <el-button
  30.           size="small"
  31.           type="danger"
  32.           @click="handleDelete(scope.$index, scope.row)"
  33.           >Delete</el-button
  34.         >
  35.       </template>
  36.     </el-table-column>
  37.   </el-table>
  38. </template>
  40. <script lang="ts" setup>
  41. import { Timer } from '@element-plus/icons-vue'
  43. interface User {
  44.   date: string
  45.   name: string
  46.   address: string
  47. }
  49. const handleEdit = (index: number, row: User) => {
  50.   console.log(index, row)
  51. }
  52. const handleDelete = (index: number, row: User) => {
  53.   console.log(index, row)
  54. }
  56. const tableData: User[] = [
  57.   {
  58.     date: '2016-05-03',
  59.     name: 'Tom',
  60.     address: 'No. 189, Grove St, Los Angeles',
  61.   },
  62.   {
  63.     date: '2016-05-02',
  64.     name: 'Tom',
  65.     address: 'No. 189, Grove St, Los Angeles',
  66.   },
  67.   {
  68.     date: '2016-05-04',
  69.     name: 'Tom',
  70.     address: 'No. 189, Grove St, Los Angeles',
  71.   },
  72.   {
  73.     date: '2016-05-01',
  74.     name: 'Tom',
  75.     address: 'No. 189, Grove St, Los Angeles',
  76.   },
  77. ]
  78. </script>

自定义表头

表头支持自定义。

通过设置 slot 来自定义表头。

Table 表格 - 图15

  1. <template>
  2.   <el-table :data="filterTableData" style="width: 100%">
  3.     <el-table-column label="Date" prop="date" />
  4.     <el-table-column label="Name" prop="name" />
  5.     <el-table-column align="right">
  6.       <template #header>
  7.         <el-input v-model="search" size="small" placeholder="Type to search" />
  8.       </template>
  9.       <template #default="scope">
  10.         <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
  11.           >Edit</el-button
  12.         >
  13.         <el-button
  14.           size="small"
  15.           type="danger"
  16.           @click="handleDelete(scope.$index, scope.row)"
  17.           >Delete</el-button
  18.         >
  19.       </template>
  20.     </el-table-column>
  21.   </el-table>
  22. </template>
  24. <script lang="ts" setup>
  25. import { computed, ref } from 'vue'
  27. interface User {
  28.   date: string
  29.   name: string
  30.   address: string
  31. }
  33. const search = ref('')
  34. const filterTableData = computed(() =>
  35.   tableData.filter(
  36.     (data) =>
  37.       !search.value ||
  38.       data.name.toLowerCase().includes(search.value.toLowerCase())
  39.   )
  40. )
  41. const handleEdit = (index: number, row: User) => {
  42.   console.log(index, row)
  43. }
  44. const handleDelete = (index: number, row: User) => {
  45.   console.log(index, row)
  46. }
  48. const tableData: User[] = [
  49.   {
  50.     date: '2016-05-03',
  51.     name: 'Tom',
  52.     address: 'No. 189, Grove St, Los Angeles',
  53.   },
  54.   {
  55.     date: '2016-05-02',
  56.     name: 'John',
  57.     address: 'No. 189, Grove St, Los Angeles',
  58.   },
  59.   {
  60.     date: '2016-05-04',
  61.     name: 'Morgan',
  62.     address: 'No. 189, Grove St, Los Angeles',
  63.   },
  64.   {
  65.     date: '2016-05-01',
  66.     name: 'Jessy',
  67.     address: 'No. 189, Grove St, Los Angeles',
  68.   },
  69. ]
  70. </script>

展开行

当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。

通过设置 type=”expand” 和 slot 可以开启展开行功能， el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 slot 相同。

Table 表格 - 图16

  1. <template>
  2.   switch parent border: <el-switch v-model="parentBorder" /> switch child
  3.   border: <el-switch v-model="childBorder" />
  4.   <el-table :data="tableData" :border="parentBorder" style="width: 100%">
  5.     <el-table-column type="expand">
  6.       <template #default="props">
  7.         <div m="4">
  8.           <p m="t-0 b-2">State: {{ props.row.state }}</p>
  9.           <p m="t-0 b-2">City: {{ props.row.city }}</p>
  10.           <p m="t-0 b-2">Address: {{ props.row.address }}</p>
  11.           <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
  12.           <h3>Family</h3>
  13.           <el-table :data="props.row.family" :border="childBorder">
  14.             <el-table-column label="Name" prop="name" />
  15.             <el-table-column label="State" prop="state" />
  16.             <el-table-column label="City" prop="city" />
  17.             <el-table-column label="Address" prop="address" />
  18.             <el-table-column label="Zip" prop="zip" />
  19.           </el-table>
  20.         </div>
  21.       </template>
  22.     </el-table-column>
  23.     <el-table-column label="Date" prop="date" />
  24.     <el-table-column label="Name" prop="name" />
  25.   </el-table>
  26. </template>
  28. <script lang="ts" setup>
  29. import { ref } from 'vue'
  31. const parentBorder = ref(false)
  32. const childBorder = ref(false)
  33. const tableData = [
  34.   {
  35.     date: '2016-05-03',
  36.     name: 'Tom',
  37.     state: 'California',
  38.     city: 'San Francisco',
  39.     address: '3650 21st St, San Francisco',
  40.     zip: 'CA 94114',
  41.     family: [
  42.       {
  43.         name: 'Jerry',
  44.         state: 'California',
  45.         city: 'San Francisco',
  46.         address: '3650 21st St, San Francisco',
  47.         zip: 'CA 94114',
  48.       },
  49.       {
  50.         name: 'Spike',
  51.         state: 'California',
  52.         city: 'San Francisco',
  53.         address: '3650 21st St, San Francisco',
  54.         zip: 'CA 94114',
  55.       },
  56.       {
  57.         name: 'Tyke',
  58.         state: 'California',
  59.         city: 'San Francisco',
  60.         address: '3650 21st St, San Francisco',
  61.         zip: 'CA 94114',
  62.       },
  63.     ],
  64.   },
  65.   {
  66.     date: '2016-05-02',
  67.     name: 'Tom',
  68.     state: 'California',
  69.     city: 'San Francisco',
  70.     address: '3650 21st St, San Francisco',
  71.     zip: 'CA 94114',
  72.     family: [
  73.       {
  74.         name: 'Jerry',
  75.         state: 'California',
  76.         city: 'San Francisco',
  77.         address: '3650 21st St, San Francisco',
  78.         zip: 'CA 94114',
  79.       },
  80.       {
  81.         name: 'Spike',
  82.         state: 'California',
  83.         city: 'San Francisco',
  84.         address: '3650 21st St, San Francisco',
  85.         zip: 'CA 94114',
  86.       },
  87.       {
  88.         name: 'Tyke',
  89.         state: 'California',
  90.         city: 'San Francisco',
  91.         address: '3650 21st St, San Francisco',
  92.         zip: 'CA 94114',
  93.       },
  94.     ],
  95.   },
  96.   {
  97.     date: '2016-05-04',
  98.     name: 'Tom',
  99.     state: 'California',
  100.     city: 'San Francisco',
  101.     address: '3650 21st St, San Francisco',
  102.     zip: 'CA 94114',
  103.     family: [
  104.       {
  105.         name: 'Jerry',
  106.         state: 'California',
  107.         city: 'San Francisco',
  108.         address: '3650 21st St, San Francisco',
  109.         zip: 'CA 94114',
  110.       },
  111.       {
  112.         name: 'Spike',
  113.         state: 'California',
  114.         city: 'San Francisco',
  115.         address: '3650 21st St, San Francisco',
  116.         zip: 'CA 94114',
  117.       },
  118.       {
  119.         name: 'Tyke',
  120.         state: 'California',
  121.         city: 'San Francisco',
  122.         address: '3650 21st St, San Francisco',
  123.         zip: 'CA 94114',
  124.       },
  125.     ],
  126.   },
  127.   {
  128.     date: '2016-05-01',
  129.     name: 'Tom',
  130.     state: 'California',
  131.     city: 'San Francisco',
  132.     address: '3650 21st St, San Francisco',
  133.     zip: 'CA 94114',
  134.     family: [
  135.       {
  136.         name: 'Jerry',
  137.         state: 'California',
  138.         city: 'San Francisco',
  139.         address: '3650 21st St, San Francisco',
  140.         zip: 'CA 94114',
  141.       },
  142.       {
  143.         name: 'Spike',
  144.         state: 'California',
  145.         city: 'San Francisco',
  146.         address: '3650 21st St, San Francisco',
  147.         zip: 'CA 94114',
  148.       },
  149.       {
  150.         name: 'Tyke',
  151.         state: 'California',
  152.         city: 'San Francisco',
  153.         address: '3650 21st St, San Francisco',
  154.         zip: 'CA 94114',
  155.       },
  156.     ],
  157.   },
  158.   {
  159.     date: '2016-05-08',
  160.     name: 'Tom',
  161.     state: 'California',
  162.     city: 'San Francisco',
  163.     address: '3650 21st St, San Francisco',
  164.     zip: 'CA 94114',
  165.     family: [
  166.       {
  167.         name: 'Jerry',
  168.         state: 'California',
  169.         city: 'San Francisco',
  170.         address: '3650 21st St, San Francisco',
  171.         zip: 'CA 94114',
  172.       },
  173.       {
  174.         name: 'Spike',
  175.         state: 'California',
  176.         city: 'San Francisco',
  177.         address: '3650 21st St, San Francisco',
  178.         zip: 'CA 94114',
  179.       },
  180.       {
  181.         name: 'Tyke',
  182.         state: 'California',
  183.         city: 'San Francisco',
  184.         address: '3650 21st St, San Francisco',
  185.         zip: 'CA 94114',
  186.       },
  187.     ],
  188.   },
  189.   {
  190.     date: '2016-05-06',
  191.     name: 'Tom',
  192.     state: 'California',
  193.     city: 'San Francisco',
  194.     address: '3650 21st St, San Francisco',
  195.     zip: 'CA 94114',
  196.     family: [
  197.       {
  198.         name: 'Jerry',
  199.         state: 'California',
  200.         city: 'San Francisco',
  201.         address: '3650 21st St, San Francisco',
  202.         zip: 'CA 94114',
  203.       },
  204.       {
  205.         name: 'Spike',
  206.         state: 'California',
  207.         city: 'San Francisco',
  208.         address: '3650 21st St, San Francisco',
  209.         zip: 'CA 94114',
  210.       },
  211.       {
  212.         name: 'Tyke',
  213.         state: 'California',
  214.         city: 'San Francisco',
  215.         address: '3650 21st St, San Francisco',
  216.         zip: 'CA 94114',
  217.       },
  218.     ],
  219.   },
  220.   {
  221.     date: '2016-05-07',
  222.     name: 'Tom',
  223.     state: 'California',
  224.     city: 'San Francisco',
  225.     address: '3650 21st St, San Francisco',
  226.     zip: 'CA 94114',
  227.     family: [
  228.       {
  229.         name: 'Jerry',
  230.         state: 'California',
  231.         city: 'San Francisco',
  232.         address: '3650 21st St, San Francisco',
  233.         zip: 'CA 94114',
  234.       },
  235.       {
  236.         name: 'Spike',
  237.         state: 'California',
  238.         city: 'San Francisco',
  239.         address: '3650 21st St, San Francisco',
  240.         zip: 'CA 94114',
  241.       },
  242.       {
  243.         name: 'Tyke',
  244.         state: 'California',
  245.         city: 'San Francisco',
  246.         address: '3650 21st St, San Francisco',
  247.         zip: 'CA 94114',
  248.       },
  249.     ],
  250.   },
  251. ]
  252. </script>

树形数据与懒加载

支持树类型的数据的显示。 当 row 中包含 children 字段时，被视为树形数据。 渲染嵌套数据需要 prop 的 row-key。 此外，子行数据可以异步加载。 设置 Table 的lazy属性为 true 与加载函数 load 。 通过指定 row 中的hasChildren字段来指定哪些行是包含子节点。 children 与hasChildren都可以通过 tree-props 配置。

Table 表格 - 图17

  1. <template>
  2.   <div>
  3.     <el-table
  4.       :data="tableData"
  5.       style="width: 100%; margin-bottom: 20px"
  6.       row-key="id"
  7.       border
  8.       default-expand-all
  9.     >
  10.       <el-table-column prop="date" label="date" sortable width="180" />
  11.       <el-table-column prop="name" label="Name" sortable width="180" />
  12.     </el-table>
  14.     <el-table
  15.       :data="tableData1"
  16.       style="width: 100%"
  17.       row-key="id"
  18.       border
  19.       lazy
  20.       :load="load"
  21.       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  22.     >
  23.       <el-table-column prop="date" label="Date" width="180" />
  24.       <el-table-column prop="name" label="Name" width="180" />
  25.     </el-table>
  26.   </div>
  27. </template>
  28. <script lang="ts" setup>
  29. interface User {
  30.   id: number
  31.   date: string
  32.   name: string
  33.   hasChildren?: boolean
  34.   children?: User[]
  35. }
  37. const load = (
  38.   row: User,
  39.   treeNode: unknown,
  40.   resolve: (date: User[]) => void
  41. ) => {
  42.   setTimeout(() => {
  43.     resolve([
  44.       {
  45.         id: 31,
  46.         date: '2016-05-01',
  47.         name: 'wangxiaohu',
  48.       },
  49.       {
  50.         id: 32,
  51.         date: '2016-05-01',
  52.         name: 'wangxiaohu',
  53.       },
  54.     ])
  55.   }, 1000)
  56. }
  58. const tableData: User[] = [
  59.   {
  60.     id: 1,
  61.     date: '2016-05-02',
  62.     name: 'wangxiaohu',
  63.   },
  64.   {
  65.     id: 2,
  66.     date: '2016-05-04',
  67.     name: 'wangxiaohu',
  68.   },
  69.   {
  70.     id: 3,
  71.     date: '2016-05-01',
  72.     name: 'wangxiaohu',
  73.     children: [
  74.       {
  75.         id: 31,
  76.         date: '2016-05-01',
  77.         name: 'wangxiaohu',
  78.       },
  79.       {
  80.         id: 32,
  81.         date: '2016-05-01',
  82.         name: 'wangxiaohu',
  83.       },
  84.     ],
  85.   },
  86.   {
  87.     id: 4,
  88.     date: '2016-05-03',
  89.     name: 'wangxiaohu',
  90.   },
  91. ]
  93. const tableData1: User[] = [
  94.   {
  95.     id: 1,
  96.     date: '2016-05-02',
  97.     name: 'wangxiaohu',
  98.   },
  99.   {
  100.     id: 2,
  101.     date: '2016-05-04',
  102.     name: 'wangxiaohu',
  103.   },
  104.   {
  105.     id: 3,
  106.     date: '2016-05-01',
  107.     name: 'wangxiaohu',
  108.     hasChildren: true,
  109.   },
  110.   {
  111.     id: 4,
  112.     date: '2016-05-03',
  113.     name: 'wangxiaohu',
  114.   },
  115. ]
  116. </script>

表尾合计行

若表格展示的是各类数字，可以在表尾显示各列的合计。

将 show-summary 设置为true就会在表格尾部展示合计行。 默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。 当然，你也可以定义自己的合计逻辑。 使用 summary-method 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中， 具体可以参考本例中的第二个表格。

Table 表格 - 图18

  1. <template>
  2.   <el-table :data="tableData" border show-summary style="width: 100%">
  3.     <el-table-column prop="id" label="ID" width="180" />
  4.     <el-table-column prop="name" label="Name" />
  5.     <el-table-column prop="amount1" sortable label="Amount 1" />
  6.     <el-table-column prop="amount2" sortable label="Amount 2" />
  7.     <el-table-column prop="amount3" sortable label="Amount 3" />
  8.   </el-table>
  10.   <el-table
  11.     :data="tableData"
  12.     border
  13.     height="200"
  14.     :summary-method="getSummaries"
  15.     show-summary
  16.     style="width: 100%; margin-top: 20px"
  17.   >
  18.     <el-table-column prop="id" label="ID" width="180" />
  19.     <el-table-column prop="name" label="Name" />
  20.     <el-table-column prop="amount1" label="Cost 1 ($)" />
  21.     <el-table-column prop="amount2" label="Cost 2 ($)" />
  22.     <el-table-column prop="amount3" label="Cost 3 ($)" />
  23.   </el-table>
  24. </template>
  26. <script lang="ts" setup>
  27. import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
  29. interface Product {
  30.   id: string
  31.   name: string
  32.   amount1: string
  33.   amount2: string
  34.   amount3: number
  35. }
  37. interface SummaryMethodProps<T = Product> {
  38.   columns: TableColumnCtx<T>[]
  39.   data: T[]
  40. }
  42. const getSummaries = (param: SummaryMethodProps) => {
  43.   const { columns, data } = param
  44.   const sums: string[] = []
  45.   columns.forEach((column, index) => {
  46.     if (index === 0) {
  47.       sums[index] = 'Total Cost'
  48.       return
  49.     }
  50.     const values = data.map((item) => Number(item[column.property]))
  51.     if (!values.every((value) => Number.isNaN(value))) {
  52.       sums[index] = `$ ${values.reduce((prev, curr) => {
  53.         const value = Number(curr)
  54.         if (!Number.isNaN(value)) {
  55.           return prev + curr
  56.         } else {
  57.           return prev
  58.         }
  59.       }, 0)}`
  60.     } else {
  61.       sums[index] = 'N/A'
  62.     }
  63.   })
  65.   return sums
  66. }
  68. const tableData: Product[] = [
  69.   {
  70.     id: '12987122',
  71.     name: 'Tom',
  72.     amount1: '234',
  73.     amount2: '3.2',
  74.     amount3: 10,
  75.   },
  76.   {
  77.     id: '12987123',
  78.     name: 'Tom',
  79.     amount1: '165',
  80.     amount2: '4.43',
  81.     amount3: 12,
  82.   },
  83.   {
  84.     id: '12987124',
  85.     name: 'Tom',
  86.     amount1: '324',
  87.     amount2: '1.9',
  88.     amount3: 9,
  89.   },
  90.   {
  91.     id: '12987125',
  92.     name: 'Tom',
  93.     amount1: '621',
  94.     amount2: '2.2',
  95.     amount3: 17,
  96.   },
  97.   {
  98.     id: '12987126',
  99.     name: 'Tom',
  100.     amount1: '539',
  101.     amount2: '4.1',
  102.     amount3: 15,
  103.   },
  104. ]
  105. </script>

合并行或列

多行或多列共用一个数据时，可以合并行或列。

通过给 table 传入span-method方法可以实现合并行或列， 方法的参数是一个对象，里面包含当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex 四个属性。 该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。 也可以返回一个键名为 rowspan 和 colspan 的对象。

Table 表格 - 图19

  1. <template>
  2.   <div>
  3.     <el-table
  4.       :data="tableData"
  5.       :span-method="arraySpanMethod"
  6.       border
  7.       style="width: 100%"
  8.     >
  9.       <el-table-column prop="id" label="ID" width="180" />
  10.       <el-table-column prop="name" label="Name" />
  11.       <el-table-column prop="amount1" sortable label="Amount 1" />
  12.       <el-table-column prop="amount2" sortable label="Amount 2" />
  13.       <el-table-column prop="amount3" sortable label="Amount 3" />
  14.     </el-table>
  16.     <el-table
  17.       :data="tableData"
  18.       :span-method="objectSpanMethod"
  19.       border
  20.       style="width: 100%; margin-top: 20px"
  21.     >
  22.       <el-table-column prop="id" label="ID" width="180" />
  23.       <el-table-column prop="name" label="Name" />
  24.       <el-table-column prop="amount1" label="Amount 1" />
  25.       <el-table-column prop="amount2" label="Amount 2" />
  26.       <el-table-column prop="amount3" label="Amount 3" />
  27.     </el-table>
  28.   </div>
  29. </template>
  31. <script lang="ts" setup>
  32. import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
  34. interface User {
  35.   id: string
  36.   name: string
  37.   amount1: string
  38.   amount2: string
  39.   amount3: number
  40. }
  42. interface SpanMethodProps {
  43.   row: User
  44.   column: TableColumnCtx<User>
  45.   rowIndex: number
  46.   columnIndex: number
  47. }
  49. const arraySpanMethod = ({
  50.   row,
  51.   column,
  52.   rowIndex,
  53.   columnIndex,
  54. }: SpanMethodProps) => {
  55.   if (rowIndex % 2 === 0) {
  56.     if (columnIndex === 0) {
  57.       return [1, 2]
  58.     } else if (columnIndex === 1) {
  59.       return [0, 0]
  60.     }
  61.   }
  62. }
  64. const objectSpanMethod = ({
  65.   row,
  66.   column,
  67.   rowIndex,
  68.   columnIndex,
  69. }: SpanMethodProps) => {
  70.   if (columnIndex === 0) {
  71.     if (rowIndex % 2 === 0) {
  72.       return {
  73.         rowspan: 2,
  74.         colspan: 1,
  75.       }
  76.     } else {
  77.       return {
  78.         rowspan: 0,
  79.         colspan: 0,
  80.       }
  81.     }
  82.   }
  83. }
  85. const tableData: User[] = [
  86.   {
  87.     id: '12987122',
  88.     name: 'Tom',
  89.     amount1: '234',
  90.     amount2: '3.2',
  91.     amount3: 10,
  92.   },
  93.   {
  94.     id: '12987123',
  95.     name: 'Tom',
  96.     amount1: '165',
  97.     amount2: '4.43',
  98.     amount3: 12,
  99.   },
  100.   {
  101.     id: '12987124',
  102.     name: 'Tom',
  103.     amount1: '324',
  104.     amount2: '1.9',
  105.     amount3: 9,
  106.   },
  107.   {
  108.     id: '12987125',
  109.     name: 'Tom',
  110.     amount1: '621',
  111.     amount2: '2.2',
  112.     amount3: 17,
  113.   },
  114.   {
  115.     id: '12987126',
  116.     name: 'Tom',
  117.     amount1: '539',
  118.     amount2: '4.1',
  119.     amount3: 15,
  120.   },
  121. ]
  122. </script>

自定义索引

自定义 type=index 列的行号。

通过给 type=index 的列传入 index 属性，可以自定义索引。 该属性传入数字时，将作为索引的起始值。 也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。

Table 表格 - 图20

  1. <template>
  2.   <el-table :data="tableData" style="width: 100%">
  3.     <el-table-column type="index" :index="indexMethod" />
  4.     <el-table-column prop="date" label="Date" width="180" />
  5.     <el-table-column prop="name" label="Name" width="180" />
  6.     <el-table-column prop="address" label="Address" />
  7.   </el-table>
  8. </template>
  10. <script lang="ts" setup>
  11. const indexMethod = (index: number) => {
  12.   return index * 2
  13. }
  14. const tableData = [
  15.   {
  16.     date: '2016-05-03',
  17.     name: 'Tom',
  18.     state: 'California',
  19.     city: 'Los Angeles',
  20.     address: 'No. 189, Grove St, Los Angeles',
  21.     zip: 'CA 90036',
  22.     tag: 'Home',
  23.   },
  24.   {
  25.     date: '2016-05-02',
  26.     name: 'Tom',
  27.     state: 'California',
  28.     city: 'Los Angeles',
  29.     address: 'No. 189, Grove St, Los Angeles',
  30.     zip: 'CA 90036',
  31.     tag: 'Office',
  32.   },
  33.   {
  34.     date: '2016-05-04',
  35.     name: 'Tom',
  36.     state: 'California',
  37.     city: 'Los Angeles',
  38.     address: 'No. 189, Grove St, Los Angeles',
  39.     zip: 'CA 90036',
  40.     tag: 'Home',
  41.   },
  42.   {
  43.     date: '2016-05-01',
  44.     name: 'Tom',
  45.     state: 'California',
  46.     city: 'Los Angeles',
  47.     address: 'No. 189, Grove St, Los Angeles',
  48.     zip: 'CA 90036',
  49.     tag: 'Office',
  50.   },
  51. ]
  52. </script>

表格布局

通过属性 table-layout Table 表格 - 图21 可以指定表格中单元格、行和列的布局方式

Table 表格 - 图22

  1. <template>
  2.   <el-radio-group v-model="tableLayout">
  3.     <el-radio-button label="fixed" />
  4.     <el-radio-button label="auto" />
  5.   </el-radio-group>
  6.   <el-table :data="tableData" :table-layout="tableLayout">
  7.     <el-table-column prop="date" label="Date" />
  8.     <el-table-column prop="name" label="Name" />
  9.     <el-table-column prop="address" label="Address" />
  10.   </el-table>
  11. </template>
  13. <script lang="ts" setup>
  14. import { ref } from 'vue'
  16. const tableLayout = ref('fixed')
  18. const tableData = [
  19.   {
  20.     date: '2016-05-03',
  21.     name: 'Tom',
  22.     address: 'No. 189, Grove St, Los Angeles',
  23.   },
  24.   {
  25.     date: '2016-05-02',
  26.     name: 'Tom',
  27.     address: 'No. 189, Grove St, Los Angeles',
  28.   },
  29.   {
  30.     date: '2016-05-04',
  31.     name: 'Tom',
  32.     address: 'No. 189, Grove St, Los Angeles',
  33.   },
  34.   {
  35.     date: '2016-05-01',
  36.     name: 'Tom',
  37.     address: 'No. 189, Grove St, Los Angeles',
  38.   },
  39. ]
  40. </script>

Table 属性

属性说明类型可选值默认值
data显示的数据array——
heightTable 的高度， 默认为自动高度。 如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。string / number——
max-heightTable 的最大高度。 合法的值为数字或者单位为 px 的高度。string / number——
stripe是否为斑马纹 tableboolean—false
border是否带有纵向边框boolean—false
sizeTable 的尺寸stringlarge / default /small—
fit列的宽度是否自撑开boolean—true
show-header是否显示表头boolean—true
highlight-current-row是否要高亮当前行boolean—false
current-row-key当前行的 key，只写属性string / number——
row-class-name行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。function({ row, rowIndex }) / string——
row-style行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。function({ row, rowIndex }) / object——
cell-class-name单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。function({ row, column, rowIndex, columnIndex }) / string——
cell-style单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。function({ row, column, rowIndex, columnIndex }) / object——
header-row-class-name表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。function({ row, rowIndex }) / string——
header-row-style表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。function({ row, rowIndex }) / object——
header-cell-class-name表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。function({ row, column, rowIndex, columnIndex }) / string——
header-cell-style表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。function({ row, column, rowIndex, columnIndex }) / object——
row-key行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。function(row) / string——
empty-text空数据时显示的文本内容， 也可以通过 #empty 设置string—No Data
default-expand-all是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效boolean—false
expand-row-keys可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。array——
default-sort默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序objectorder: ascending / descending如果只指定了 prop, 没有指定 order, 则默认顺序是 ascending
tooltip-effecttooltip effect 属性stringdark / lightdark
show-summary是否在表尾显示合计行boolean—false
sum-text合计行第一列的文本string—合计
summary-method自定义的合计计算方法function({ columns, data })——
span-method合并行或列的计算方法function({ row, column, rowIndex, columnIndex })——
select-on-indeterminate在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。 若为 true，则选中所有行；若为 false，则取消选择所有行boolean—true
indent展示树形数据时，树节点的缩进number—16
lazy是否懒加载子节点数据boolean——
load加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息function(row, treeNode, resolve)——
tree-props渲染嵌套数据的配置选项object—{ hasChildren: ‘hasChildren’, children: ‘children’ }
table-layout设置表格单元、行和列的布局方式stringfixed / autofixed
scrollbar-always-on总是显示滚动条boolean—false
flexible 2.2.1确保主轴的最小尺寸boolean—false

Table 事件

事件名说明回调参数
select当用户手动勾选数据行的 Checkbox 时触发的事件selection, row
select-all当用户手动勾选全选 Checkbox 时触发的事件selection
selection-change当选择项发生变化时会触发该事件selection
cell-mouse-enter当单元格 hover 进入时会触发该事件row, column, cell, event
cell-mouse-leave当单元格 hover 退出时会触发该事件row, column, cell, event
cell-click当某个单元格被点击时会触发该事件row, column, cell, event
cell-dblclick当某个单元格被双击击时会触发该事件row, column, cell, event
cell-contextmenu当某个单元格被鼠标右键点击时会触发该事件row, column, cell, event
row-click当某一行被点击时会触发该事件row, column, event
row-contextmenu当某一行被鼠标右键点击时会触发该事件row, column, event
row-dblclick当某一行被双击时会触发该事件row, column, event
header-click当某一列的表头被点击时会触发该事件column, event
header-contextmenu当某一列的表头被鼠标右键点击时触发该事件column, event
sort-change当表格的排序条件发生变化的时候会触发该事件{ column, prop, order }
filter-changecolumn 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件filters
current-change当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性currentRow, oldCurrentRow
header-dragend当拖动表头改变了列的宽度的时候会触发该事件newWidth, oldWidth, column, event
expand-change当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）row, (expandedRows | expanded)

Table 方法

方法名说明参数
clearSelection用于多选表格，清空用户的选择—
getSelectionRows返回当前选中的行
toggleRowSelection用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否row, selected
toggleAllSelection用于多选表格，切换全选和全不选—
toggleRowExpansion用于可扩展的表格或树表格，如果某行被扩展，则切换。 使用第二个参数，您可以直接设置该行应该被扩展或折叠。row, expanded
setCurrentRow用于单选表格，设定某一行为选中行， 如果调用时不加参数，则会取消目前高亮行的选中状态。row
clearSort用于清空排序条件，数据会恢复成未排序的状态—
clearFilter传入由columnKey 组成的数组以清除指定列的过滤条件。 如果没有参数，清除所有过滤器columnKeys
doLayout对 Table 进行重新布局。 当表格可见性变化时，您可能需要调用此方法以获得正确的布局—
sort手动排序表格。 参数 prop 属性指定排序列，order 指定排序顺序。prop: string, order: string
scrollTo滚动到一组特定坐标(options: ScrollToOptions | number, yCoord?: number)
setScrollTop设置垂直滚动位置top
setScrollLeft设置水平滚动位置left

Table 插槽

插槽名说明子标签
-自定义默认内容Table-column
append插入至表格最后一行之后的内容， 如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。 若表格有合计行，该 slot 会位于合计行之上。—
empty当数据为空时自定义的内容—

Table-column 属性

属性说明类型可选值默认值
type对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮stringselection / index / expand—
index如果设置了 type=index，可以通过传递 index 属性来自定义索引number / function(index)——
labelcolumn 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件string——
column-keycolumn 的 key， column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件string——
prop字段名称 对应列内容的字段名， 也可以使用 property属性string——
width对应列的宽度string / number——
min-width对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列string / number——
fixed列是否固定在左侧或者右侧。 true 表示固定在左侧string / booleantrue / ‘left’ / ‘right’—
render-header列标题 Label 区域渲染使用的 Functionfunction({ column, $index })——
sortable对应列是否可以排序， 如果设置为 ‘custom’，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件boolean / stringtrue / false / ‘custom’false
sort-method指定数据按照哪个属性进行排序，仅当sortable设置为true的时候有效。 应该如同 Array.sort 那样返回一个 Numberfunction(a, b)——
sort-by指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推function(row, index) / string / array——
sort-orders数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。 需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序array数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序[‘ascending’, ‘descending’, null]
resizable对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）boolean—true
formatter用来格式化内容function(row, column, cellValue, index)——
show-overflow-tooltip当内容过长被隐藏时显示 tooltipboolean—false
align对齐方式stringleft / center / rightleft
header-align表头对齐方式， 若不设置该项，则使用表格的对齐方式stringleft / center / right—
class-name列的 classNamestring——
label-class-name当前列标题的自定义类名string——
selectable仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选function(row, index)——
reserve-selection仅对 type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效。boolean—false
filters数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。array[{ text, value }]——
filter-placement过滤弹出框的定位string与 Tooltip 的 placement 属性相同—
filter-multiple数据过滤的选项是否多选boolean—true
filter-method数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。function(value, row, column)——
filtered-value选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。array——

Table-column 插槽

插槽名说明
—自定义列的内容 作用域参数为 { row, column, $index }
header自定义表头的内容， 作用域参数为 { column, $index }

常见问题解答（FAQ）

如何在表格中使用图像预览？

  1. <el-table-column label="Thumbnail" width="180">
  2.     <template #default="scope">
  3.         <div style="display: flex; align-items: center">
  4.             <el-image :preview-src-list="srcList"/>
  5.         </div>
  6.     </template>
  7. </el-table-column>

注：由于固定列是通过 sticky 来实现的，如果表格中含有固定列，请在图像上添加 preview-teleported 属性。

当使用 DOM 模板时，为什么列没有渲染？

典型问题： #5046 Table 表格 - 图23 #5862 Table 表格 - 图24 #6919 Table 表格 - 图25

这是因为 HTML 定义只允许一些特定元素省略关闭标签，最常见的是 <input> 和 <img>。 对于任意其他元素，如果你省略了关闭标签，原生的 HTML 解析器会认为你从未关闭打开的标签。

详情请参阅 Vue 文档 Table 表格 - 图26 。

源代码

组件 Table 表格 - 图27 • 文档 Table 表格 - 图28

贡献者

Table 表格 - 图29 msidolphin

Table 表格 - 图30 三咲智子

Table 表格 - 图31 云游君

Table 表格 - 图32 JeremyWuuuuu

Table 表格 - 图33 qiang

Table 表格 - 图34 LIUCHAO

Table 表格 - 图35 zz

Table 表格 - 图36 Zhongxiang Wang

Table 表格 - 图37 Xc

Table 表格 - 图38 神楽坂みずき

Table 表格 - 图39 kooriookami

Table 表格 - 图40 Aex

Table 表格 - 图41 wiidede

Table 表格 - 图42 RealityBoy

Table 表格 - 图43 jarven

Table 表格 - 图44 Carter Li

Table 表格 - 图45 bqy_fe

Table 表格 - 图46 Alan Wang

Table 表格 - 图47 iamkun

Table 表格 - 图48 justwiner

Table 表格 - 图49 C.Y.Kun

Table 表格 - 图50 热爱vue的小菜鸟

Table 表格 - 图51 Jianjun Yu

Table 表格 - 图52 沐林森13

Table 表格 - 图53 joson

Table 表格 - 图54 Delyan Haralanov

Table 表格 - 图55 hminghe

Table 表格 - 图56 KAKI

Table 表格 - 图57 Yuyao Nie

Table 表格 - 图58 张仕春

Table 表格 - 图59 btea

Table 表格 - 图60 deepthan

Table 表格 - 图61 liu

Table 表格 - 图62 on the field of hope

Table 表格 - 图63 Ryan2128

Table 表格 - 图64 zazzaz

Table 表格 - 图65 Hades-li

Table 表格 - 图66 renovate[bot]

Table 表格 - 图67 liuyutao

Table 表格 - 图68 Chris

Table 表格 - 图69 류한경

Table 表格 - 图70 SongWuKong

Table 表格 - 图71 wanghaitao