Virtualized Table 虚拟化表格 beta

在前端开发领域，表格一直都是一个高频出现的组件，尤其是在中后台和数据分析场景。 但是，对于 Table V1来说，当一屏里超过 1000 条数据记录时，就会出现卡顿等性能问题，体验不是很好。

通过虚拟化表格组件，超大数据渲染将不再是一个头疼的问题。

TIP

该组件仍在测试中，生产环境使用可能有风险。 若您发现了 bug 或问题，请于 GitHub Virtualized Table 虚拟化表格 2.2.0 - 图1 报告给我们以便修复。 同时，有一些 API 并未在此文档中提及，因为部分还没有开发完全，因此我们不在此提及。

即使虚拟化的表格是高效的，但是当数据负载过大时，网络和内存容量也会成为您应用程序的瓶颈。 因此请牢记，虚拟化表格永远不是最完美的解决方案，请考虑数据分页、过滤器等优化方案。

基础用法

让我们简单渲染一个拥有 1000 行 10 列的虚拟化表格组件，来展示其极佳的性能。

Virtualized Table 虚拟化表格 2.2.0 - 图2

  1. <template>
  2.   <el-table-v2
  3.     :columns="columns"
  4.     :data="data"
  5.     :width="700"
  6.     :height="400"
  7.     fixed
  8.   />
  9. </template>
  11. <script lang="ts" setup>
  12. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  13.   Array.from({ length }).map((_, columnIndex) => ({
  14.     ...props,
  15.     key: `${prefix}${columnIndex}`,
  16.     dataKey: `${prefix}${columnIndex}`,
  17.     title: `Column ${columnIndex}`,
  18.     width: 150,
  19.   }))
  21. const generateData = (
  22.   columns: ReturnType<typeof generateColumns>,
  23.   length = 200,
  24.   prefix = 'row-'
  25. ) =>
  26.   Array.from({ length }).map((_, rowIndex) => {
  27.     return columns.reduce(
  28.       (rowData, column, columnIndex) => {
  29.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  30.         return rowData
  31.       },
  32.       {
  33.         id: `${prefix}${rowIndex}`,
  34.         parentId: null,
  35.       }
  36.     )
  37.   })
  39. const columns = generateColumns(10)
  40. const data = generateData(columns, 1000)
  41. </script>

自动调整大小

如果您不想手动设置表格的 width 和 height ，可以使用 AutoResizer 组件包裹表格组件，这将会自动更新表格的宽度和高度。

尝试调整您的浏览器大小来看看它是如何工作的。

TIP

由于AutoResizer 组件的默认高度是 100%， 所以请确保 该组件的父元素被设置了一个固定的高度 也可以通过 设置style 属性为 AutoResizer指定高度。

Virtualized Table 虚拟化表格 2.2.0 - 图3

  1. <template>
  2.   <div style="height: 400px">
  3.     <el-auto-resizer>
  4.       <template #default="{ height, width }">
  5.         <el-table-v2
  6.           :columns="columns"
  7.           :data="data"
  8.           :width="width"
  9.           :height="height"
  10.           fixed
  11.         />
  12.       </template>
  13.     </el-auto-resizer>
  14.   </div>
  15. </template>
  17. <script lang="ts" setup>
  18. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  19.   Array.from({ length }).map((_, columnIndex) => ({
  20.     ...props,
  21.     key: `${prefix}${columnIndex}`,
  22.     dataKey: `${prefix}${columnIndex}`,
  23.     title: `Column ${columnIndex}`,
  24.     width: 150,
  25.   }))
  27. const generateData = (
  28.   columns: ReturnType<typeof generateColumns>,
  29.   length = 200,
  30.   prefix = 'row-'
  31. ) =>
  32.   Array.from({ length }).map((_, rowIndex) => {
  33.     return columns.reduce(
  34.       (rowData, column, columnIndex) => {
  35.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  36.         return rowData
  37.       },
  38.       {
  39.         id: `${prefix}${rowIndex}`,
  40.         parentId: null,
  41.       }
  42.     )
  43.   })
  45. const columns = generateColumns(10)
  46. const data = generateData(columns, 200)
  47. </script>

自定义单元格渲染

您可以自由定制表格单元格的渲染内容，下面是一个简单例子。

Virtualized Table 虚拟化表格 2.2.0 - 图4

  1. <template>
  2.   <el-table-v2
  3.     :columns="columns"
  4.     :data="data"
  5.     :width="700"
  6.     :height="400"
  7.     fixed
  8.   />
  9. </template>
  11. <script lang="tsx" setup>
  12. import { ref } from 'vue'
  13. import dayjs from 'dayjs'
  14. import {
  15.   ElButton,
  16.   ElIcon,
  17.   ElTag,
  18.   ElTooltip,
  19.   TableV2FixedDir,
  20. } from 'element-plus'
  21. import { Timer } from '@element-plus/icons-vue'
  23. import type { Column } from 'element-plus'
  25. let id = 0
  27. const dataGenerator = () => ({
  28.   id: `random-id-${++id}`,
  29.   name: 'Tom',
  30.   date: '2020-10-1',
  31. })
  33. const columns: Column<any>[] = [
  34.   {
  35.     key: 'date',
  36.     title: 'Date',
  37.     dataKey: 'date',
  38.     width: 150,
  39.     fixed: TableV2FixedDir.LEFT,
  40.     cellRenderer: ({ cellData: date }) => (
  41.       <ElTooltip content={dayjs(date).format('YYYY/MM/DD')}>
  42.         {
  43.           <span class="flex items-center">
  44.             <ElIcon class="mr-3">
  45.               <Timer />
  46.             </ElIcon>
  47.             {dayjs(date).format('YYYY/MM/DD')}
  48.           </span>
  49.         }
  50.       </ElTooltip>
  51.     ),
  52.   },
  53.   {
  54.     key: 'name',
  55.     title: 'Name',
  56.     dataKey: 'name',
  57.     width: 150,
  58.     align: 'center',
  59.     cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
  60.   },
  61.   {
  62.     key: 'operations',
  63.     title: 'Operations',
  64.     cellRenderer: () => (
  65.       <>
  66.         <ElButton size="small">Edit</ElButton>
  67.         <ElButton size="small" type="danger">
  68.           Delete
  69.         </ElButton>
  70.       </>
  71.     ),
  72.     width: 150,
  73.     align: 'center',
  74.   },
  75. ]
  77. const data = ref(Array.from({ length: 200 }).map(dataGenerator))
  78. </script>

带有筛选框的表格

使用自定义的单元格渲染来给表格组件添加筛选能力。

Virtualized Table 虚拟化表格 2.2.0 - 图5

  1. <template>
  2.   <div style="height: 400px">
  3.     <el-auto-resizer>
  4.       <template #default="{ height, width }">
  5.         <el-table-v2
  6.           :columns="columns"
  7.           :data="data"
  8.           :width="width"
  9.           :height="height"
  10.           fixed
  11.         />
  12.       </template>
  13.     </el-auto-resizer>
  14.   </div>
  15. </template>
  17. <script lang="tsx" setup>
  18. import { ref, resolveDynamicComponent, unref } from 'vue'
  20. import type { FunctionalComponent } from 'vue'
  21. import type { Column, ElCheckbox } from 'element-plus'
  23. const Checkbox = resolveDynamicComponent('ElCheckbox') as typeof ElCheckbox
  25. type SelectionCellProps = {
  26.   value: boolean
  27.   intermediate?: boolean
  28.   onChange: (value: boolean) => void
  29. }
  31. const SelectionCell: FunctionalComponent<SelectionCellProps> = ({
  32.   value,
  33.   intermediate = false,
  34.   onChange,
  35. }) => {
  36.   return (
  37.     <Checkbox
  38.       onChange={onChange}
  39.       modelValue={value}
  40.       indeterminate={intermediate}
  41.     />
  42.   )
  43. }
  45. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  46.   Array.from({ length }).map((_, columnIndex) => ({
  47.     ...props,
  48.     key: `${prefix}${columnIndex}`,
  49.     dataKey: `${prefix}${columnIndex}`,
  50.     title: `Column ${columnIndex}`,
  51.     width: 150,
  52.   }))
  54. const generateData = (
  55.   columns: ReturnType<typeof generateColumns>,
  56.   length = 200,
  57.   prefix = 'row-'
  58. ) =>
  59.   Array.from({ length }).map((_, rowIndex) => {
  60.     return columns.reduce(
  61.       (rowData, column, columnIndex) => {
  62.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  63.         return rowData
  64.       },
  65.       {
  66.         id: `${prefix}${rowIndex}`,
  67.         checked: false,
  68.         parentId: null,
  69.       }
  70.     )
  71.   })
  73. const columns: Column<any>[] = generateColumns(10)
  74. columns.unshift({
  75.   key: 'selection',
  76.   width: 50,
  77.   cellRenderer: ({ rowData }) => {
  78.     const onChange = (value: boolean) => (rowData.checked = value)
  79.     return <SelectionCell value={rowData.checked} onChange={onChange} />
  80.   },
  82.   headerCellRenderer: () => {
  83.     const _data = unref(data)
  84.     const onChange = (value: boolean) =>
  85.       (data.value = _data.map((row) => {
  86.         row.checked = value
  87.         return row
  88.       }))
  89.     const allSelected = _data.every((row) => row.checked)
  90.     const containsChecked = _data.some((row) => row.checked)
  92.     return (
  93.       <SelectionCell
  94.         value={allSelected}
  95.         intermediate={containsChecked && !allSelected}
  96.         onChange={onChange}
  97.       />
  98.     )
  99.   },
  100. })
  102. const data = ref(generateData(columns, 200))
  103. </script>

可编辑单元格

类似上面添加筛选框的方法，我们可以用同样的方法实现可编辑单元格

Virtualized Table 虚拟化表格 2.2.0 - 图6

  1. <template>
  2.   <div style="height: 400px">
  3.     <el-auto-resizer>
  4.       <template #default="{ height, width }">
  5.         <el-table-v2
  6.           :columns="columns"
  7.           :data="data"
  8.           :width="width"
  9.           :height="height"
  10.           fixed
  11.         />
  12.       </template>
  13.     </el-auto-resizer>
  14.   </div>
  15. </template>
  17. <script lang="tsx" setup>
  18. import { nextTick, ref, resolveDynamicComponent } from 'vue'
  20. import type { FunctionalComponent } from 'vue'
  21. import type { Column, ElInput } from 'element-plus'
  23. const Input = resolveDynamicComponent('ElInput') as typeof ElInput
  25. type SelectionCellProps = {
  26.   value: string
  27.   intermediate?: boolean
  28.   onChange: (value: string) => void
  29.   forwardRef: (el: InstanceType<typeof ElInput>) => void
  30. }
  32. const InputCell: FunctionalComponent<SelectionCellProps> = ({
  33.   value,
  34.   onChange,
  35.   forwardRef,
  36. }) => {
  37.   return <Input ref={forwardRef as any} onInput={onChange} modelValue={value} />
  38. }
  40. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  41.   Array.from({ length }).map((_, columnIndex) => ({
  42.     ...props,
  43.     key: `${prefix}${columnIndex}`,
  44.     dataKey: `${prefix}${columnIndex}`,
  45.     title: `Column ${columnIndex}`,
  46.     width: 150,
  47.   }))
  49. const generateData = (
  50.   columns: ReturnType<typeof generateColumns>,
  51.   length = 200,
  52.   prefix = 'row-'
  53. ) =>
  54.   Array.from({ length }).map((_, rowIndex) => {
  55.     return columns.reduce(
  56.       (rowData, column, columnIndex) => {
  57.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  58.         return rowData
  59.       },
  60.       {
  61.         id: `${prefix}${rowIndex}`,
  62.         editing: false,
  63.         parentId: null,
  64.       }
  65.     )
  66.   })
  68. const columns: Column<any>[] = generateColumns(10)
  69. columns[0] = {
  70.   ...columns[0],
  71.   title: 'Editable Column',
  72.   cellRenderer: ({ rowData, column }) => {
  73.     const onChange = (value: string) => {
  74.       rowData[column.dataKey!] = value
  75.     }
  76.     const onEnterEditMode = () => {
  77.       rowData.editing = true
  78.     }
  80.     const onExitEditMode = () => (rowData.editing = false)
  81.     const input = ref()
  82.     const setRef = (el) => {
  83.       input.value = el
  84.       if (el) {
  85.         el.focus?.()
  86.       }
  87.     }
  89.     return rowData.editing ? (
  90.       <InputCell
  91.         forwardRef={setRef}
  92.         value={rowData[column.dataKey!]}
  93.         onChange={onChange}
  94.         onBlur={onExitEditMode}
  95.         onKeydownEnter={onExitEditMode}
  96.       />
  97.     ) : (
  98.       <div class="table-v2-inline-editing-trigger" onClick={onEnterEditMode}>
  99.         {rowData[column.dataKey!]}
  100.       </div>
  101.     )
  102.   },
  103. }
  105. const data = ref(generateData(columns, 200))
  106. </script>
  108. <style>
  109. .table-v2-inline-editing-trigger {
  110.   border: 1px transparent dotted;
  111.   padding: 4px;
  112. }
  114. .table-v2-inline-editing-trigger:hover {
  115.   border-color: var(--el-color-primary);
  116. }
  117. </style>

带状态的表格

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

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class， 表明该行处于某种状态。 每10行会自动添加 bg-blue-200 类名，每5行会添加 bg-red-100 类名。

Virtualized Table 虚拟化表格 2.2.0 - 图7

  1. <template>
  2.   <el-table-v2
  3.     :columns="columns"
  4.     :data="data"
  5.     :row-class="rowClass"
  6.     :width="700"
  7.     :height="400"
  8.   />
  9. </template>
  11. <script lang="tsx" setup>
  12. import { ref } from 'vue'
  13. import dayjs from 'dayjs'
  14. import {
  15.   ElButton,
  16.   ElIcon,
  17.   ElTag,
  18.   ElTooltip,
  19.   TableV2FixedDir,
  20. } from 'element-plus'
  21. import { Timer } from '@element-plus/icons-vue'
  23. import type { Column, RowClassNameGetter } from 'element-plus'
  25. let id = 0
  27. const dataGenerator = () => ({
  28.   id: `random-id-${++id}`,
  29.   name: 'Tom',
  30.   date: '2020-10-1',
  31. })
  33. const columns: Column<any>[] = [
  34.   {
  35.     key: 'date',
  36.     title: 'Date',
  37.     dataKey: 'date',
  38.     width: 150,
  39.     fixed: TableV2FixedDir.LEFT,
  40.     cellRenderer: ({ cellData: date }) => (
  41.       <ElTooltip content={dayjs(date).format('YYYY/MM/DD')}>
  42.         {
  43.           <span class="flex items-center">
  44.             <ElIcon class="mr-3">
  45.               <Timer />
  46.             </ElIcon>
  47.             {dayjs(date).format('YYYY/MM/DD')}
  48.           </span>
  49.         }
  50.       </ElTooltip>
  51.     ),
  52.   },
  53.   {
  54.     key: 'name',
  55.     title: 'Name',
  56.     dataKey: 'name',
  57.     width: 150,
  58.     align: 'center',
  59.     cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
  60.   },
  61.   {
  62.     key: 'operations',
  63.     title: 'Operations',
  64.     cellRenderer: () => (
  65.       <>
  66.         <ElButton size="small">Edit</ElButton>
  67.         <ElButton size="small" type="danger">
  68.           Delete
  69.         </ElButton>
  70.       </>
  71.     ),
  72.     width: 150,
  73.     align: 'center',
  74.     flexGrow: 1,
  75.   },
  76. ]
  78. const data = ref(Array.from({ length: 200 }).map(dataGenerator))
  80. const rowClass = ({ rowIndex }: Parameters<RowClassNameGetter<any>>[0]) => {
  81.   if (rowIndex % 10 === 5) {
  82.     return 'bg-red-100'
  83.   } else if (rowIndex % 10 === 0) {
  84.     return 'bg-blue-200'
  85.   }
  86.   return ''
  87. }
  88. </script>

表格行的粘性布局

您可以简单地使用 fixed-data 属性来实现将某些行固定到表格的头部。

您可以使用滚动事件动态地设置粘性行，见此示例。

Virtualized Table 虚拟化表格 2.2.0 - 图8

  1. <template>
  2.   <el-table-v2
  3.     :columns="columns"
  4.     :data="tableData"
  5.     :fixed-data="fixedData"
  6.     :width="700"
  7.     :height="400"
  8.     :row-class="rowClass"
  9.     fixed
  10.     @scroll="onScroll"
  11.   />
  12. </template>
  14. <script lang="ts" setup>
  15. import { computed, ref } from 'vue'
  17. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  18.   Array.from({ length }).map((_, columnIndex) => ({
  19.     ...props,
  20.     key: `${prefix}${columnIndex}`,
  21.     dataKey: `${prefix}${columnIndex}`,
  22.     title: `Column ${columnIndex}`,
  23.     width: 150,
  24.   }))
  26. const generateData = (
  27.   columns: ReturnType<typeof generateColumns>,
  28.   length = 200,
  29.   prefix = 'row-'
  30. ) =>
  31.   Array.from({ length }).map((_, rowIndex) => {
  32.     return columns.reduce(
  33.       (rowData, column, columnIndex) => {
  34.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  35.         return rowData
  36.       },
  37.       {
  38.         id: `${prefix}${rowIndex}`,
  39.         parentId: null,
  40.       }
  41.     )
  42.   })
  44. const columns = generateColumns(10)
  45. const data = generateData(columns, 200)
  47. const rowClass = ({ rowIndex }) => {
  48.   if (rowIndex < 0 || (rowIndex + 1) % 5 === 0) return 'sticky-row'
  49. }
  51. const stickyIndex = ref(0)
  53. const fixedData = computed(() =>
  54.   data.slice(stickyIndex.value, stickyIndex.value + 1)
  55. )
  57. const tableData = computed(() => {
  58.   return data.slice(1)
  59. })
  61. const onScroll = ({ scrollTop }) => {
  62.   stickyIndex.value = Math.floor(scrollTop / 250) * 5
  63. }
  64. </script>
  66. <style>
  67. .el-el-table-v2__fixed-header-row {
  68.   background-color: var(--el-color-primary-light-5);
  69.   font-weight: bold;
  70. }
  71. </style>

固定列表格

出于某些原因，您可能会让一些列固定在表格的左侧和右侧。您可以通过为表格添加特殊属性来实现。

您可以设置该行的 fixed 属性为 true （代表FixedDir.LEFT）、FixedDir.LEFT 或 FixedDir.RIGHT

Virtualized Table 虚拟化表格 2.2.0 - 图9

  1. <template>
  2.   <el-table-v2
  3.     :columns="columns"
  4.     :data="data"
  5.     :sort-by="sortBy"
  6.     :width="700"
  7.     :height="400"
  8.     fixed
  9.     @column-sort="onSort"
  10.   />
  11. </template>
  13. <script lang="ts" setup>
  14. import { ref } from 'vue'
  15. import { TableV2FixedDir, TableV2SortOrder } from 'element-plus'
  17. import type { SortBy } from 'element-plus'
  19. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  20.   Array.from({ length }).map((_, columnIndex) => ({
  21.     ...props,
  22.     key: `${prefix}${columnIndex}`,
  23.     dataKey: `${prefix}${columnIndex}`,
  24.     title: `Column ${columnIndex}`,
  25.     width: 150,
  26.   }))
  28. const generateData = (
  29.   columns: ReturnType<typeof generateColumns>,
  30.   length = 200,
  31.   prefix = 'row-'
  32. ) =>
  33.   Array.from({ length }).map((_, rowIndex) => {
  34.     return columns.reduce(
  35.       (rowData, column, columnIndex) => {
  36.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  37.         return rowData
  38.       },
  39.       {
  40.         id: `${prefix}${rowIndex}`,
  41.         parentId: null,
  42.       }
  43.     )
  44.   })
  46. const columns = generateColumns(10)
  47. let data = generateData(columns, 200)
  49. columns[0].fixed = true
  50. columns[1].fixed = TableV2FixedDir.LEFT
  51. columns[9].fixed = TableV2FixedDir.RIGHT
  53. for (let i = 0; i < 3; i++) columns[i].sortable = true
  55. const sortBy = ref<SortBy>({
  56.   key: 'column-0',
  57.   order: TableV2SortOrder.ASC,
  58. })
  60. const onSort = (_sortBy: SortBy) => {
  61.   data = data.reverse()
  62.   sortBy.value = _sortBy
  63. }
  64. </script>

表头分组

正如这个示例，通过自定义表头渲染以将表头分组。

TIP

在这种形况下，我们使用JSX特性（该功能在 playground 中不被支持，您可以在您的本地环境或在线 IDE （如 codesandbox ）中使用）

建议您使用 JSX 使用您的表格组件，因为它包含 VNode 操作。

Virtualized Table 虚拟化表格 2.2.0 - 图10

  1. <template>
  2.   <el-table-v2
  3.     fixed
  4.     :columns="fixedColumns"
  5.     :data="data"
  6.     :header-height="[50, 40, 50]"
  7.     :header-class="headerClass"
  8.     :width="700"
  9.     :height="400"
  10.   >
  11.     <template #header="props">
  12.       <customized-header v-bind="props" />
  13.     </template>
  14.   </el-table-v2>
  15. </template>
  16. <script lang="tsx" setup>
  17. import { TableV2FixedDir, TableV2Placeholder } from 'element-plus'
  19. import type { FunctionalComponent } from 'vue'
  20. import type {
  21.   HeaderClassNameGetter,
  22.   TableV2CustomizedHeaderSlotParam,
  23. } from 'element-plus'
  25. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  26.   Array.from({ length }).map((_, columnIndex) => ({
  27.     ...props,
  28.     key: `${prefix}${columnIndex}`,
  29.     dataKey: `${prefix}${columnIndex}`,
  30.     title: `Column ${columnIndex}`,
  31.     width: 150,
  32.   }))
  34. const generateData = (
  35.   columns: ReturnType<typeof generateColumns>,
  36.   length = 200,
  37.   prefix = 'row-'
  38. ) =>
  39.   Array.from({ length }).map((_, rowIndex) => {
  40.     return columns.reduce(
  41.       (rowData, column, columnIndex) => {
  42.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  43.         return rowData
  44.       },
  45.       {
  46.         id: `${prefix}${rowIndex}`,
  47.         parentId: null,
  48.       }
  49.     )
  50.   })
  51. const columns = generateColumns(15)
  52. const data = generateData(columns, 200)
  54. const fixedColumns = columns.map((column, columnIndex) => {
  55.   let fixed: TableV2FixedDir | undefined = undefined
  56.   if (columnIndex < 3) fixed = TableV2FixedDir.LEFT
  57.   if (columnIndex > 12) fixed = TableV2FixedDir.RIGHT
  58.   return { ...column, fixed, width: 100 }
  59. })
  61. const CustomizedHeader: FunctionalComponent<
  62.   TableV2CustomizedHeaderSlotParam
  63. > = ({ cells, columns, headerIndex }) => {
  64.   if (headerIndex === 2) return cells
  66.   const groupCells = [] as typeof cells
  67.   let width = 0
  68.   let idx = 0
  70.   columns.forEach((column, columnIndex) => {
  71.     if (column.placeholderSign === TableV2Placeholder)
  72.       groupCells.push(cells[columnIndex])
  73.     else {
  74.       width += cells[columnIndex].props!.column.width
  75.       idx++
  77.       const nextColumn = columns[columnIndex + 1]
  78.       if (
  79.         columnIndex === columns.length - 1 ||
  80.         nextColumn.placeholderSign === TableV2Placeholder ||
  81.         idx === (headerIndex === 0 ? 4 : 2)
  82.       ) {
  83.         groupCells.push(
  84.           <div
  85.             class="flex items-center justify-center custom-header-cell"
  86.             style={{
  87.               ...cells[columnIndex].props!.style,
  88.               width: `${width}px`,
  89.             }}
  90.           >
  91.             Group width {width}
  92.           </div>
  93.         )
  94.         width = 0
  95.         idx = 0
  96.       }
  97.     }
  98.   })
  99.   return groupCells
  100. }
  102. const headerClass = ({
  103.   headerIndex,
  104. }: Parameters<HeaderClassNameGetter<any>>[0]) => {
  105.   if (headerIndex === 1) return 'el-primary-color'
  106.   return ''
  107. }
  108. </script>
  110. <style>
  111. .el-el-table-v2__header-row .custom-header-cell {
  112.   border-right: 1px solid var(--el-border-color);
  113. }
  115. .el-el-table-v2__header-row .custom-header-cell:last-child {
  116.   border-right: none;
  117. }
  119. .el-primary-color {
  120.   background-color: var(--el-color-primary);
  121.   color: var(--el-color-white);
  122.   font-size: 14px;
  123.   font-weight: bold;
  124. }
  126. .el-primary-color .custom-header-cell {
  127.   padding: 0 4px;
  128. }
  129. </style>

过滤器

虚拟化表格可以提供自定义的表头渲染，因此我们可以使用这个来过滤渲染。

Virtualized Table 虚拟化表格 2.2.0 - 图11

  1. <template>
  2.   <el-table-v2
  3.     fixed
  4.     :columns="fixedColumns"
  5.     :data="data"
  6.     :width="700"
  7.     :height="400"
  8.   />
  9. </template>
  10. <script lang="tsx" setup>
  11. import { ref } from 'vue'
  12. import {
  13.   ElButton,
  14.   ElCheckbox,
  15.   ElIcon,
  16.   ElPopover,
  17.   TableV2FixedDir,
  18. } from 'element-plus'
  19. import { Filter } from '@element-plus/icons-vue'
  21. import type { HeaderCellSlotProps } from 'element-plus'
  23. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  24.   Array.from({ length }).map((_, columnIndex) => ({
  25.     ...props,
  26.     key: `${prefix}${columnIndex}`,
  27.     dataKey: `${prefix}${columnIndex}`,
  28.     title: `Column ${columnIndex}`,
  29.     width: 150,
  30.   }))
  32. const generateData = (
  33.   columns: ReturnType<typeof generateColumns>,
  34.   length = 200,
  35.   prefix = 'row-'
  36. ) =>
  37.   Array.from({ length }).map((_, rowIndex) => {
  38.     return columns.reduce(
  39.       (rowData, column, columnIndex) => {
  40.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  41.         return rowData
  42.       },
  43.       {
  44.         id: `${prefix}${rowIndex}`,
  45.         parentId: null,
  46.       }
  47.     )
  48.   })
  49. const columns = generateColumns(10)
  50. const data = ref(generateData(columns, 200))
  52. const shouldFilter = ref(false)
  53. const popoverRef = ref()
  55. const onFilter = () => {
  56.   popoverRef.value.hide()
  57.   if (shouldFilter.value) {
  58.     data.value = generateData(columns, 100, 'filtered-')
  59.   } else {
  60.     data.value = generateData(columns, 200)
  61.   }
  62. }
  64. const onReset = () => {
  65.   shouldFilter.value = false
  66.   onFilter()
  67. }
  69. columns[0].headerCellRenderer = (props: HeaderCellSlotProps) => {
  70.   return (
  71.     <div class="flex items-center justify-center">
  72.       <span class="mr-2 text-xs">{props.column.title}</span>
  73.       <ElPopover ref={popoverRef} trigger="click" {...{ width: 200 }}>
  74.         {{
  75.           default: () => (
  76.             <div class="filter-wrapper">
  77.               <div class="filter-group">
  78.                 <ElCheckbox v-model={shouldFilter.value}>
  79.                   Filter Text
  80.                 </ElCheckbox>
  81.               </div>
  82.               <div class="el-table-v2__demo-filter">
  83.                 <ElButton text onClick={onFilter}>
  84.                   Confirm
  85.                 </ElButton>
  86.                 <ElButton text onClick={onReset}>
  87.                   Reset
  88.                 </ElButton>
  89.               </div>
  90.             </div>
  91.           ),
  92.           reference: () => (
  93.             <ElIcon class="cursor-pointer">
  94.               <Filter />
  95.             </ElIcon>
  96.           ),
  97.         }}
  98.       </ElPopover>
  99.     </div>
  100.   )
  101. }
  103. const fixedColumns = columns.map((column, columnIndex) => {
  104.   let fixed: TableV2FixedDir | undefined = undefined
  105.   if (columnIndex < 2) fixed = TableV2FixedDir.LEFT
  106.   if (columnIndex > 9) fixed = TableV2FixedDir.RIGHT
  107.   return { ...column, fixed, width: 100 }
  108. })
  109. </script>
  111. <style>
  112. .el-table-v2__demo-filter {
  113.   border-top: var(--el-border);
  114.   margin: 12px -12px -12px;
  115.   padding: 0 12px;
  116.   display: flex;
  117.   justify-content: space-between;
  118. }
  119. </style>

可排序表格

您可以使用排序状态来对表格进行排序。

Virtualized Table 虚拟化表格 2.2.0 - 图12

  1. <template>
  2.   <el-table-v2
  3.     :columns="columns"
  4.     :data="data"
  5.     :sort-by="sortState"
  6.     :width="700"
  7.     :height="400"
  8.     fixed
  9.     @column-sort="onSort"
  10.   />
  11. </template>
  13. <script lang="ts" setup>
  14. import { ref } from 'vue'
  15. import { TableV2SortOrder } from 'element-plus'
  16. import type { SortBy } from 'element-plus'
  18. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  19.   Array.from({ length }).map((_, columnIndex) => ({
  20.     ...props,
  21.     key: `${prefix}${columnIndex}`,
  22.     dataKey: `${prefix}${columnIndex}`,
  23.     title: `Column ${columnIndex}`,
  24.     width: 150,
  25.   }))
  27. const generateData = (
  28.   columns: ReturnType<typeof generateColumns>,
  29.   length = 200,
  30.   prefix = 'row-'
  31. ) =>
  32.   Array.from({ length }).map((_, rowIndex) => {
  33.     return columns.reduce(
  34.       (rowData, column, columnIndex) => {
  35.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  36.         return rowData
  37.       },
  38.       {
  39.         id: `${prefix}${rowIndex}`,
  40.         parentId: null,
  41.       }
  42.     )
  43.   })
  45. const columns = generateColumns(10)
  46. let data = generateData(columns, 200)
  48. columns[0].sortable = true
  50. const sortState = ref<SortBy>({
  51.   key: 'column-0',
  52.   order: TableV2SortOrder.ASC,
  53. })
  55. const onSort = (sortBy: SortBy) => {
  56.   console.log(sortBy)
  57.   data = data.reverse()
  58.   sortState.value = sortBy
  59. }
  60. </script>

受控的排序

您可以在需要时定义多个可排序的列。 请记住，当您在定义了多个可排序的列时， UI 可能会显得有些奇怪，因为用户不知道哪一列被排序。

Virtualized Table 虚拟化表格 2.2.0 - 图13

  1. <template>
  2.   <el-table-v2
  3.     v-model:sort-state="sortState"
  4.     :columns="columns"
  5.     :data="data"
  6.     :width="700"
  7.     :height="400"
  8.     fixed
  9.     @column-sort="onSort"
  10.   />
  11. </template>
  13. <script lang="ts" setup>
  14. import { ref } from 'vue'
  15. import { TableV2SortOrder } from 'element-plus'
  16. import type { SortBy, SortState } from 'element-plus'
  18. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  19.   Array.from({ length }).map((_, columnIndex) => ({
  20.     ...props,
  21.     key: `${prefix}${columnIndex}`,
  22.     dataKey: `${prefix}${columnIndex}`,
  23.     title: `Column ${columnIndex}`,
  24.     width: 150,
  25.   }))
  27. const generateData = (
  28.   columns: ReturnType<typeof generateColumns>,
  29.   length = 200,
  30.   prefix = 'row-'
  31. ) =>
  32.   Array.from({ length }).map((_, rowIndex) => {
  33.     return columns.reduce(
  34.       (rowData, column, columnIndex) => {
  35.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  36.         return rowData
  37.       },
  38.       {
  39.         id: `${prefix}${rowIndex}`,
  40.         parentId: null,
  41.       }
  42.     )
  43.   })
  45. const columns = generateColumns(10)
  46. const data = ref(generateData(columns, 200))
  48. columns[0].sortable = true
  49. columns[1].sortable = true
  51. const sortState = ref<SortState>({
  52.   'column-0': TableV2SortOrder.DESC,
  53.   'column-1': TableV2SortOrder.ASC,
  54. })
  56. const onSort = ({ key, order }: SortBy) => {
  57.   sortState.value[key] = order
  58.   data.value = data.value.reverse()
  59. }
  60. </script>

高亮显示鼠标悬停单元格

当数据列表很大时，有时候会忘记正在访问的行和列，使用这个属性可以给予你这个帮助。

Virtualized Table 虚拟化表格 2.2.0 - 图14

  1. <template>
  2.   <div style="height: 400px">
  3.     <el-auto-resizer>
  4.       <template #default="{ height, width }">
  5.         <el-table-v2
  6.           :columns="columns"
  7.           :cell-props="cellProps"
  8.           :class="kls"
  9.           :data="data"
  10.           :width="width"
  11.           :height="height"
  12.         />
  13.       </template>
  14.     </el-auto-resizer>
  15.   </div>
  16. </template>
  18. <script lang="ts" setup>
  19. import { ref } from 'vue'
  21. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  22.   Array.from({ length }).map((_, columnIndex) => ({
  23.     ...props,
  24.     key: `${prefix}${columnIndex}`,
  25.     dataKey: `${prefix}${columnIndex}`,
  26.     title: `Column ${columnIndex}`,
  27.     width: 150,
  28.   }))
  30. const generateData = (
  31.   columns: ReturnType<typeof generateColumns>,
  32.   length = 200,
  33.   prefix = 'row-'
  34. ) =>
  35.   Array.from({ length }).map((_, rowIndex) => {
  36.     return columns.reduce(
  37.       (rowData, column, columnIndex) => {
  38.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  39.         return rowData
  40.       },
  41.       {
  42.         id: `${prefix}${rowIndex}`,
  43.         parentId: null,
  44.       }
  45.     )
  46.   })
  48. const columns = generateColumns(10)
  49. columns.unshift({
  50.   key: 'column-n-1',
  51.   width: 50,
  52.   title: 'Row No.',
  53.   cellRenderer: ({ rowIndex }) => `${rowIndex + 1}`,
  54.   align: 'center',
  55. })
  56. const data = generateData(columns, 200)
  58. const cellProps = ({ columnIndex }) => {
  59.   const key = `hovering-col-${columnIndex}`
  60.   return {
  61.     ['data-key']: key,
  62.     onMouseenter: () => {
  63.       kls.value = key
  64.     },
  65.     onMouseleave: () => {
  66.       kls.value = ''
  67.     },
  68.   }
  69. }
  71. const kls = ref<string>('')
  72. </script>
  74. <style>
  75. .hovering-col-0 [data-key='hovering-col-0'],
  76. .hovering-col-1 [data-key='hovering-col-1'],
  77. .hovering-col-2 [data-key='hovering-col-2'],
  78. .hovering-col-3 [data-key='hovering-col-3'],
  79. .hovering-col-4 [data-key='hovering-col-4'],
  80. .hovering-col-5 [data-key='hovering-col-5'],
  81. .hovering-col-6 [data-key='hovering-col-6'],
  82. .hovering-col-7 [data-key='hovering-col-7'],
  83. .hovering-col-8 [data-key='hovering-col-8'],
  84. .hovering-col-9 [data-key='hovering-col-9'],
  85. .hovering-col-10 [data-key='hovering-col-10'] {
  86.   background: var(--el-table-row-hover-bg-color);
  87. }
  89. [data-key='hovering-col-0'] {
  90.   font-weight: bold;
  91.   user-select: none;
  92.   pointer-events: none;
  93. }
  94. </style>

横跨列

虚拟化表格没有使用内置的 table 元素，故 colspan 和 rowspan 与 TableV1 比较略有不同。 通过定制的行渲染器，我们仍然可以实现这个需求。 在如下例子，你会学习如何做到这一点。

Virtualized Table 虚拟化表格 2.2.0 - 图15

  1. <template>
  2.   <el-table-v2 fixed :columns="columns" :data="data" :width="700" :height="400">
  3.     <template #row="props">
  4.       <Row v-bind="props" />
  5.     </template>
  6.   </el-table-v2>
  7. </template>
  9. <script lang="ts" setup>
  10. import { cloneVNode } from 'vue'
  12. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  13.   Array.from({ length }).map((_, columnIndex) => ({
  14.     ...props,
  15.     key: `${prefix}${columnIndex}`,
  16.     dataKey: `${prefix}${columnIndex}`,
  17.     title: `Column ${columnIndex}`,
  18.     width: 150,
  19.   }))
  21. const generateData = (
  22.   columns: ReturnType<typeof generateColumns>,
  23.   length = 200,
  24.   prefix = 'row-'
  25. ) =>
  26.   Array.from({ length }).map((_, rowIndex) => {
  27.     return columns.reduce(
  28.       (rowData, column, columnIndex) => {
  29.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  30.         return rowData
  31.       },
  32.       {
  33.         id: `${prefix}${rowIndex}`,
  34.         parentId: null,
  35.       }
  36.     )
  37.   })
  39. const columns = generateColumns(10)
  40. const data = generateData(columns, 200)
  42. const colSpanIndex = 1
  43. columns[colSpanIndex].colSpan = ({ rowIndex }) => (rowIndex % 4) + 1
  44. columns[colSpanIndex].align = 'center'
  46. const Row = ({ rowData, rowIndex, cells, columns }) => {
  47.   const colSpan = columns[colSpanIndex].colSpan({ rowData, rowIndex })
  48.   if (colSpan > 1) {
  49.     let width = Number.parseInt(cells[colSpanIndex].props.style.width)
  50.     for (let i = 1; i < colSpan; i++) {
  51.       width += Number.parseInt(cells[colSpanIndex + i].props.style.width)
  52.       cells[colSpanIndex + i] = null
  53.     }
  54.     const style = {
  55.       ...cells[colSpanIndex].props.style,
  56.       width: `${width}px`,
  57.       backgroundColor: 'var(--el-color-primary-light-3)',
  58.     }
  59.     cells[colSpanIndex] = cloneVNode(cells[colSpanIndex], { style })
  60.   }
  62.   return cells
  63. }
  64. </script>

纵跨行

既然我们有 Colspan 当然我们也有纵跨的列。它与 colspan 略有不同，但是原理相似。

Virtualized Table 虚拟化表格 2.2.0 - 图16

  1. <template>
  2.   <el-table-v2 fixed :columns="columns" :data="data" :width="700" :height="400">
  3.     <template #row="props">
  4.       <Row v-bind="props" />
  5.     </template>
  6.   </el-table-v2>
  7. </template>
  9. <script lang="ts" setup>
  10. import { cloneVNode } from 'vue'
  12. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  13.   Array.from({ length }).map((_, columnIndex) => ({
  14.     ...props,
  15.     key: `${prefix}${columnIndex}`,
  16.     dataKey: `${prefix}${columnIndex}`,
  17.     title: `Column ${columnIndex}`,
  18.     width: 150,
  19.   }))
  21. const generateData = (
  22.   columns: ReturnType<typeof generateColumns>,
  23.   length = 200,
  24.   prefix = 'row-'
  25. ) =>
  26.   Array.from({ length }).map((_, rowIndex) => {
  27.     return columns.reduce(
  28.       (rowData, column, columnIndex) => {
  29.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  30.         return rowData
  31.       },
  32.       {
  33.         id: `${prefix}${rowIndex}`,
  34.         parentId: null,
  35.       }
  36.     )
  37.   })
  39. const columns = generateColumns(10)
  40. const data = generateData(columns, 200)
  42. const rowSpanIndex = 0
  43. columns[rowSpanIndex].rowSpan = ({ rowIndex }) =>
  44.   rowIndex % 2 === 0 && rowIndex <= data.length - 2 ? 2 : 1
  46. const Row = ({ rowData, rowIndex, cells, columns }) => {
  47.   const rowSpan = columns[rowSpanIndex].rowSpan({ rowData, rowIndex })
  48.   if (rowSpan > 1) {
  49.     const cell = cells[rowSpanIndex]
  50.     const style = {
  51.       ...cell.props.style,
  52.       backgroundColor: 'var(--el-color-primary-light-3)',
  53.       height: `${rowSpan * 50 - 1}px`,
  54.       alignSelf: 'flex-start',
  55.       zIndex: 1,
  56.     }
  57.     cells[rowSpanIndex] = cloneVNode(cell, { style })
  58.   }
  59.   return cells
  60. }
  61. </script>

同时跨行和跨列

我们当然可以同时使用横跨列与纵跨行来满足您的业务需求！

Virtualized Table 虚拟化表格 2.2.0 - 图17

  1. <template>
  2.   <el-table-v2 fixed :columns="columns" :data="data" :width="700" :height="400">
  3.     <template #row="props">
  4.       <Row v-bind="props" />
  5.     </template>
  6.   </el-table-v2>
  7. </template>
  9. <script lang="tsx" setup>
  10. import { cloneVNode } from 'vue'
  12. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  13.   Array.from({ length }).map((_, columnIndex) => ({
  14.     ...props,
  15.     key: `${prefix}${columnIndex}`,
  16.     dataKey: `${prefix}${columnIndex}`,
  17.     title: `Column ${columnIndex}`,
  18.     width: 150,
  19.   }))
  21. const generateData = (
  22.   columns: ReturnType<typeof generateColumns>,
  23.   length = 200,
  24.   prefix = 'row-'
  25. ) =>
  26.   Array.from({ length }).map((_, rowIndex) => {
  27.     return columns.reduce(
  28.       (rowData, column, columnIndex) => {
  29.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  30.         return rowData
  31.       },
  32.       {
  33.         id: `${prefix}${rowIndex}`,
  34.         parentId: null,
  35.       }
  36.     )
  37.   })
  39. const columns = generateColumns(10)
  40. const data = generateData(columns, 200)
  42. const colSpanIndex = 1
  43. columns[colSpanIndex].colSpan = ({ rowIndex }) => (rowIndex % 4) + 1
  44. columns[colSpanIndex].align = 'center'
  46. const rowSpanIndex = 0
  47. columns[rowSpanIndex].rowSpan = ({ rowIndex }) =>
  48.   rowIndex % 2 === 0 && rowIndex <= data.length - 2 ? 2 : 1
  50. const Row = ({ rowData, rowIndex, cells, columns }) => {
  51.   const colSpan = columns[colSpanIndex].colSpan({ rowData, rowIndex })
  52.   if (colSpan > 1) {
  53.     let width = Number.parseInt(cells[colSpanIndex].props.style.width)
  54.     for (let i = 1; i < colSpan; i++) {
  55.       width += Number.parseInt(cells[colSpanIndex + i].props.style.width)
  56.       cells[colSpanIndex + i] = null
  57.     }
  58.     const style = {
  59.       ...cells[colSpanIndex].props.style,
  60.       width: `${width}px`,
  61.       backgroundColor: 'var(--el-color-primary-light-3)',
  62.     }
  63.     cells[colSpanIndex] = cloneVNode(cells[colSpanIndex], { style })
  64.   }
  66.   const rowSpan = columns[rowSpanIndex].rowSpan({ rowData, rowIndex })
  67.   if (rowSpan > 1) {
  68.     const cell = cells[rowSpanIndex]
  69.     const style = {
  70.       ...cell.props.style,
  71.       backgroundColor: 'var(--el-color-danger-light-3)',
  72.       height: `${rowSpan * 50}px`,
  73.       alignSelf: 'flex-start',
  74.       zIndex: 1,
  75.     }
  76.     cells[rowSpanIndex] = cloneVNode(cell, { style })
  77.   } else {
  78.     const style = cells[rowSpanIndex].props.style
  79.     // override the cell here for creating a pure node without pollute the style
  80.     cells[rowSpanIndex] = (
  81.       <div style={{ ...style, width: `${style.width}px` }} />
  82.     )
  83.   }
  84.   return cells
  85. }
  86. </script>

树形数据

虚拟化表格当然可以渲染树形数据，您可以通过点击箭头图标来展开/折叠树节点。

Virtualized Table 虚拟化表格 2.2.0 - 图18

  1. <template>
  2.   <el-table-v2
  3.     v-model:expanded-row-keys="expandedRowKeys"
  4.     :columns="columns"
  5.     :data="treeData"
  6.     :width="700"
  7.     :expand-column-key="expandColumnKey"
  8.     :height="400"
  9.     fixed
  10.     @row-expand="onRowExpanded"
  11.     @expanded-rows-change="onExpandedRowsChange"
  12.   />
  13. </template>
  15. <script lang="ts" setup>
  16. import { computed, ref } from 'vue'
  17. import { TableV2FixedDir } from 'element-plus'
  19. import type { ExpandedRowsChangeHandler, RowExpandHandler } from 'element-plus'
  21. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  22.   Array.from({ length }).map((_, columnIndex) => ({
  23.     ...props,
  24.     key: `${prefix}${columnIndex}`,
  25.     dataKey: `${prefix}${columnIndex}`,
  26.     title: `Column ${columnIndex}`,
  27.     width: 150,
  28.   }))
  30. const generateData = (
  31.   columns: ReturnType<typeof generateColumns>,
  32.   length = 200,
  33.   prefix = 'row-'
  34. ) =>
  35.   Array.from({ length }).map((_, rowIndex) => {
  36.     return columns.reduce(
  37.       (rowData, column, columnIndex) => {
  38.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  39.         return rowData
  40.       },
  41.       {
  42.         id: `${prefix}${rowIndex}`,
  43.         parentId: null,
  44.       }
  45.     )
  46.   })
  48. const columns = generateColumns(10).map((column, columnIndex) => {
  49.   let fixed!: TableV2FixedDir
  50.   if (columnIndex < 2) fixed = TableV2FixedDir.LEFT
  51.   if (columnIndex > 8) fixed = TableV2FixedDir.RIGHT
  52.   return { ...column, fixed }
  53. })
  55. const data = generateData(columns, 200)
  57. const expandColumnKey = 'column-0'
  59. // add some sub items
  60. for (let i = 0; i < 50; i++) {
  61.   data.push(
  62.     {
  63.       ...data[0],
  64.       id: `${data[0].id}-sub-${i}`,
  65.       parentId: data[0].id,
  66.       [expandColumnKey]: `Sub ${i}`,
  67.     },
  68.     {
  69.       ...data[2],
  70.       id: `${data[2].id}-sub-${i}`,
  71.       parentId: data[2].id,
  72.       [expandColumnKey]: `Sub ${i}`,
  73.     },
  74.     {
  75.       ...data[2],
  76.       id: `${data[2].id}-sub-sub-${i}`,
  77.       parentId: `${data[2].id}-sub-${i}`,
  78.       [expandColumnKey]: `Sub-Sub ${i}`,
  79.     }
  80.   )
  81. }
  83. function unflatten(
  84.   data: ReturnType<typeof generateData>,
  85.   rootId = null,
  86.   dataKey = 'id',
  87.   parentKey = 'parentId'
  88. ) {
  89.   const tree: any[] = []
  90.   const childrenMap = {}
  92.   for (const datum of data) {
  93.     const item = { ...datum }
  94.     const id = item[dataKey]
  95.     const parentId = item[parentKey]
  97.     if (Array.isArray(item.children)) {
  98.       childrenMap[id] = item.children.concat(childrenMap[id] || [])
  99.     } else if (!childrenMap[id]) {
  100.       childrenMap[id] = []
  101.     }
  102.     item.children = childrenMap[id]
  104.     if (parentId !== undefined && parentId !== rootId) {
  105.       if (!childrenMap[parentId]) childrenMap[parentId] = []
  106.       childrenMap[parentId].push(item)
  107.     } else {
  108.       tree.push(item)
  109.     }
  110.   }
  112.   return tree
  113. }
  115. const treeData = computed(() => unflatten(data))
  117. const expandedRowKeys = ref<string[]>([])
  119. const onRowExpanded = ({ expanded }: Parameters<RowExpandHandler<any>>[0]) => {
  120.   console.log('Expanded:', expanded)
  121. }
  123. const onExpandedRowsChange = (
  124.   expandedKeys: Parameters<ExpandedRowsChangeHandler>[0]
  125. ) => {
  126.   console.log(expandedKeys)
  127. }
  128. </script>

动态高度行

虚拟表格也支持渲染动态高度的单元格。当不知道一条数据具体的展示高度时，不妨使用动态渲染高度来解决。 通过设置预估行高度 estimated-row-height 来启用此 功能，估计值越接近，渲染效果将会越平滑。

TIP

每行的实际渲染高度是在渲染时动态测量的， 如果您尝试渲染大量数据，渲染界面 可能 会出现抖动。

Virtualized Table 虚拟化表格 2.2.0 - 图19

  1. <template>
  2.   <el-table-v2
  3.     :columns="columns"
  4.     :data="data"
  5.     :sort-by="sort"
  6.     :estimated-row-height="40"
  7.     :width="700"
  8.     :height="400"
  9.     fixed
  10.     @column-sort="onColumnSort"
  11.   />
  12. </template>
  14. <script lang="tsx" setup>
  15. import { ref } from 'vue'
  16. import {
  17.   ElButton,
  18.   ElTag,
  19.   TableV2FixedDir,
  20.   TableV2SortOrder,
  21. } from 'element-plus'
  23. import type { Column, SortBy } from '@element-plus/components/table-v2'
  25. const longText =
  26.   'Quaerat ipsam necessitatibus eum quibusdam est id voluptatem cumque mollitia.'
  27. const midText = 'Corrupti doloremque a quos vero delectus consequatur.'
  28. const shortText = 'Eius optio fugiat.'
  30. const textList = [shortText, midText, longText]
  32. // generate random number in range 0 to 2
  34. let id = 0
  36. const dataGenerator = () => ({
  37.   id: `random:${++id}`,
  38.   name: 'Tom',
  39.   date: '2016-05-03',
  40.   description: textList[Math.floor(Math.random() * 3)],
  41. })
  43. const columns: Column<any>[] = [
  44.   {
  45.     key: 'id',
  46.     title: 'Id',
  47.     dataKey: 'id',
  48.     width: 150,
  49.     sortable: true,
  50.     fixed: TableV2FixedDir.LEFT,
  51.   },
  52.   {
  53.     key: 'name',
  54.     title: 'Name',
  55.     dataKey: 'name',
  56.     width: 150,
  57.     align: 'center',
  58.     cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
  59.   },
  60.   {
  61.     key: 'description',
  62.     title: 'Description',
  63.     dataKey: 'description',
  64.     width: 150,
  65.     cellRenderer: ({ cellData: description }) => (
  66.       <div style="padding: 10px 0;">{description}</div>
  67.     ),
  68.   },
  69.   {
  70.     key: 'operations',
  71.     title: 'Operations',
  72.     cellRenderer: () => (
  73.       <>
  74.         <ElButton size="small">Edit</ElButton>
  75.         <ElButton size="small" type="danger">
  76.           Delete
  77.         </ElButton>
  78.       </>
  79.     ),
  80.     width: 150,
  81.     align: 'center',
  82.   },
  83. ]
  84. const data = ref(
  85.   Array.from({ length: 200 })
  86.     .map(dataGenerator)
  87.     .sort((a, b) => (a.name > b.name ? 1 : -1))
  88. )
  90. const sort = ref<SortBy>({ key: 'name', order: TableV2SortOrder.ASC })
  92. const onColumnSort = (sortBy: SortBy) => {
  93.   const order = sortBy.order === 'asc' ? 1 : -1
  94.   const dataClone = [...data.value]
  95.   dataClone.sort((a, b) => (a[sortBy.key] > b[sortBy.key] ? order : -order))
  96.   sort.value = sortBy
  97.   data.value = dataClone
  98. }
  99. </script>

可展开的附加信息

通过动态高度渲染，我们可以在表格中显示可展开的更多附加信息。

Virtualized Table 虚拟化表格 2.2.0 - 图20

  1. <template>
  2.   <el-table-v2
  3.     :columns="columns"
  4.     :data="data"
  5.     :estimated-row-height="50"
  6.     :expand-column-key="columns[0].key"
  7.     :width="700"
  8.     :height="400"
  9.   >
  10.     <template #row="props">
  11.       <Row v-bind="props" />
  12.     </template>
  13.   </el-table-v2>
  14. </template>
  16. <script lang="tsx" setup>
  17. import { ref } from 'vue'
  19. const detailedText = `Velit sed aspernatur tempora. Natus consequatur officiis dicta vel assumenda.
  20. Itaque est temporibus minus quis. Ipsum commodiab porro vel voluptas illum.
  21. Qui quam nulla et dolore autem itaque est.
  22. Id consequatur ipsum ea fuga et odit eligendi impedit.
  23. Maiores officiis occaecati et magnam et sapiente est velit sunt.
  24. Non et tempore temporibus. Excepturi et quos. Minus distinctio aut.
  25. Voluptatem ea excepturi omnis vel. Non aperiam sit sed laboriosam eaque omnis deleniti.
  26. Est molestiae omnis non et nulla repudiandae fuga sit.`
  28. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  29.   Array.from({ length }).map((_, columnIndex) => ({
  30.     ...props,
  31.     key: `${prefix}${columnIndex}`,
  32.     dataKey: `${prefix}${columnIndex}`,
  33.     title: `Column ${columnIndex}`,
  34.     width: 150,
  35.   }))
  37. const generateData = (
  38.   columns: ReturnType<typeof generateColumns>,
  39.   length = 200,
  40.   prefix = 'row-'
  41. ) =>
  42.   Array.from({ length }).map((_, rowIndex) => {
  43.     return columns.reduce(
  44.       (rowData, column, columnIndex) => {
  45.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  46.         return rowData
  47.       },
  48.       {
  49.         id: `${prefix}${rowIndex}`,
  50.         parentId: null,
  51.       }
  52.     )
  53.   })
  55. const columns = generateColumns(10)
  56. const data = ref(
  57.   generateData(columns, 200).map((data) => {
  58.     data.children = [
  59.       {
  60.         id: `${data.id}-detail-content`,
  61.         detail: detailedText,
  62.       },
  63.     ]
  64.     return data
  65.   })
  66. )
  68. const Row = ({ cells, rowData }) => {
  69.   if (rowData.detail) return <div class="p-6">{rowData.detail}</div>
  70.   return cells
  71. }
  73. Row.inheritAttrs = false
  74. </script>
  76. <style>
  77. .el-table-v2__row-depth-0 {
  78.   height: 50px;
  79. }
  81. .el-table-v2__cell-text {
  82.   overflow: hidden;
  83.   text-overflow: ellipsis;
  84.   white-space: nowrap;
  85. }
  86. </style>

自定义页脚

自定义表格 footer， 通常用来展示一些汇总数据和信息。

Virtualized Table 虚拟化表格 2.2.0 - 图21

  1. <template>
  2.   <el-table-v2
  3.     :columns="columns"
  4.     :data="data"
  5.     :row-height="40"
  6.     :width="700"
  7.     :height="400"
  8.     :footer-height="50"
  9.     fixed
  10.   >
  11.     <template #footer
  12.       ><div
  13.         class="flex items-center"
  14.         style="
  15.           justify-content: center;
  16.           height: 100%;
  17.           background-color: var(--el-color-primary-light-7);
  18.         "
  19.       >
  20.         Display a message in the footer
  21.       </div>
  22.     </template>
  23.   </el-table-v2>
  24. </template>
  26. <script lang="ts" setup>
  27. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  28.   Array.from({ length }).map((_, columnIndex) => ({
  29.     ...props,
  30.     key: `${prefix}${columnIndex}`,
  31.     dataKey: `${prefix}${columnIndex}`,
  32.     title: `Column ${columnIndex}`,
  33.     width: 150,
  34.   }))
  36. const generateData = (
  37.   columns: ReturnType<typeof generateColumns>,
  38.   length = 200,
  39.   prefix = 'row-'
  40. ) =>
  41.   Array.from({ length }).map((_, rowIndex) => {
  42.     return columns.reduce(
  43.       (rowData, column, columnIndex) => {
  44.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  45.         return rowData
  46.       },
  47.       {
  48.         id: `${prefix}${rowIndex}`,
  49.         parentId: null,
  50.       }
  51.     )
  52.   })
  54. const columns = generateColumns(10)
  55. const data = generateData(columns, 200)
  56. </script>

自定义空元素渲染器

渲染自定义的空元素

Virtualized Table 虚拟化表格 2.2.0 - 图22

  1. <template>
  2.   <el-table-v2
  3.     :columns="columns"
  4.     :data="[]"
  5.     :row-height="40"
  6.     :width="700"
  7.     :height="400"
  8.     :footer-height="50"
  9.   >
  10.     <template #empty>
  11.       <div class="flex items-center justify-center h-100%">
  12.         <el-empty />
  13.       </div>
  14.     </template>
  15.   </el-table-v2>
  16. </template>
  18. <script lang="tsx" setup>
  19. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  20.   Array.from({ length }).map((_, columnIndex) => ({
  21.     ...props,
  22.     key: `${prefix}${columnIndex}`,
  23.     dataKey: `${prefix}${columnIndex}`,
  24.     title: `Column ${columnIndex}`,
  25.     width: 150,
  26.   }))
  28. const columns = generateColumns(10)
  29. </script>

浮动遮罩层

当您想要显示加载指示器之类的浮动元素，可以通过渲染一个浮动在表格之上的遮罩层来实现。

Virtualized Table 虚拟化表格 2.2.0 - 图23

  1. <template>
  2.   <el-table-v2
  3.     :columns="columns"
  4.     :data="data"
  5.     :row-height="40"
  6.     :width="700"
  7.     :height="400"
  8.   >
  9.     <template #overlay>
  10.       <div
  11.         class="el-loading-mask"
  12.         style="display: flex; align-items: center; justify-content: center"
  13.       >
  14.         <el-icon class="is-loading" color="var(--el-color-primary)" :size="26">
  15.           <loading-icon />
  16.         </el-icon>
  17.       </div>
  18.     </template>
  19.   </el-table-v2>
  20. </template>
  22. <script lang="ts" setup>
  23. import { Loading as LoadingIcon } from '@element-plus/icons-vue'
  25. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  26.   Array.from({ length }).map((_, columnIndex) => ({
  27.     ...props,
  28.     key: `${prefix}${columnIndex}`,
  29.     dataKey: `${prefix}${columnIndex}`,
  30.     title: `Column ${columnIndex}`,
  31.     width: 150,
  32.   }))
  34. const generateData = (
  35.   columns: ReturnType<typeof generateColumns>,
  36.   length = 200,
  37.   prefix = 'row-'
  38. ) =>
  39.   Array.from({ length }).map((_, rowIndex) => {
  40.     return columns.reduce(
  41.       (rowData, column, columnIndex) => {
  42.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  43.         return rowData
  44.       },
  45.       {
  46.         id: `${prefix}${rowIndex}`,
  47.         parentId: null,
  48.       }
  49.     )
  50.   })
  52. const columns = generateColumns(10)
  53. const data = generateData(columns, 200)
  54. </script>
  55. <style>
  56. .example-showcase .el-table-v2__overlay {
  57.   z-index: 9;
  58. }
  59. </style>

手动滚动

使用 Table V2 暴露的方法进行手动或编程式滚动指定偏移或行。

TIP

scrollToRow 的第二个参数代表滚动策略，计算了要滚动的位置，其默认值是 auto。 如果你想要表格滚动到某个特定位置，可以额外配置。 可用的选项是 "auto" | "center" | "end" | "start" | "smart"

smart 和auto 之间的区别是， auto 是 smart 滚动策略的子集。

Virtualized Table 虚拟化表格 2.2.0 - 图24

  1. <template>
  2.   <div class="mb-4 flex items-center">
  3.     <el-form-item label="Scroll pixels" class="mr-4">
  4.       <el-input v-model="scrollDelta" />
  5.     </el-form-item>
  6.     <el-form-item label="Scroll rows">
  7.       <el-input v-model="scrollRows" />
  8.     </el-form-item>
  9.   </div>
  10.   <div class="mb-4 flex items-center">
  11.     <el-button @click="scrollByPixels"> Scroll by pixels </el-button>
  12.     <el-button @click="scrollByRows"> Scroll by rows </el-button>
  13.   </div>
  14.   <div style="height: 400px">
  15.     <el-auto-resizer>
  16.       <template #default="{ height, width }">
  17.         <el-table-v2
  18.           ref="tableRef"
  19.           :columns="columns"
  20.           :data="data"
  21.           :width="width"
  22.           :height="height"
  23.           fixed
  24.         />
  25.       </template>
  26.     </el-auto-resizer>
  27.   </div>
  28. </template>
  30. <script lang="ts" setup>
  31. import { ref } from 'vue'
  33. import type { TableV2Instance } from 'element-plus'
  35. const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  36.   Array.from({ length }).map((_, columnIndex) => ({
  37.     ...props,
  38.     key: `${prefix}${columnIndex}`,
  39.     dataKey: `${prefix}${columnIndex}`,
  40.     title: `Column ${columnIndex}`,
  41.     width: 150,
  42.   }))
  44. const generateData = (
  45.   columns: ReturnType<typeof generateColumns>,
  46.   length = 200,
  47.   prefix = 'row-'
  48. ) =>
  49.   Array.from({ length }).map((_, rowIndex) => {
  50.     return columns.reduce(
  51.       (rowData, column, columnIndex) => {
  52.         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
  53.         return rowData
  54.       },
  55.       {
  56.         id: `${prefix}${rowIndex}`,
  57.         parentId: null,
  58.       }
  59.     )
  60.   })
  62. const columns = generateColumns(10)
  63. const data = generateData(columns, 200)
  64. const tableRef = ref<TableV2Instance>()
  65. const scrollDelta = ref(200)
  66. const scrollRows = ref(10)
  68. function scrollByPixels() {
  69.   tableRef.value?.scrollToTop(scrollDelta.value)
  70. }
  72. function scrollByRows() {
  73.   tableRef.value?.scrollToRow(scrollRows.value)
  74. }
  75. </script>

TableV2 属性

属性描述说明类型默认值
cache为了更好的渲染效果预先多加载的行数Number2
estimated-row-height渲染动态的单元格的预估高度Number-
header-classheader 部分的自定义 class 名String/Function<HeaderClassGetter>-
header-propsheader 部分的自定义 props 名Object/Function<HeaderPropsGetter>-
header-cell-propsheader cell 部分的自定义 props 名Object/Function<HeaderCellPropsGetter>-
header-heightheader 部分的高度。当传入数组时, 将会渲染和数组长度一样多的 header 行Number/Array<Number>50
footer-heightfooter 部分的高度，当传入值时，这部分将被计算入 table 的高度里Number0
row-classrow wrapper 部分的自定义 class 名String/Function<RowClassGetter>-
row-key每行的 key 值，如果不提供，将使用索引 index 代替String/Symbol/Numberid
row-propsrow component 部分的自定义 class 名Object/Function<RowPropsGetter>-
row-height每行的高度, 用于计算表的总高度Number50
cell-props每个单元格 cell 的自定义 props (除了 header cell 以外)Object/Function<CellPropsGetter>-
columns列 column 的配置数组Array<Column>-
data要在表中渲染的数据数组Array<Data>[]
data-getter自定义数据源转换成表格消费的数据格式的处理函数Function-
fixed-data渲染行在表格主内容上方和 header 下方区域的数据Array<Data>-
expand-column-key列的 key 来标记哪个行可以被展开String-
expanded-row-keys存放行展开状态的 key 的数组，可以和 v-model 搭配使用Array<KeyType>-
default-expanded-row-keys默认展开的行的 key 的数组, 这个数据不是响应式的Array<KeyType>-
class表格的类名称，将应用于表格的全部的三个部分 (左、右、主)String/Array/Object-
fixed单元格宽度是自适应还是固定Booleanfalse
width 表的宽度，必填Number-
height 表的高度，必填Number-
max-height表格的最大高度Number-
h-scrollbar-size配置表格的水平滚动条大小，防止水平和垂直滚动条重叠。Number6
v-scrollbar-size配置表格的水平滚动条大小，防止水平和垂直滚动条重叠。Number6
scrollbar-always-on如果开启，滚动条将一直显示，反之只会在鼠标经过时显示。Booleanfalse
sort-by排序方式Object<SortBy>{}
sort-state多个排序Object<SortState>undefined

TableV2 插槽

插槽名参数
cellCellSlotProps
headerHeaderSlotProps
header-cellHeaderCellSlotProps
rowRowSlotProps
footer-
empty-
overlay-

Table 事件

事件名描述参数
column-sort列排序时调用Object<ColumnSortParam>
expanded-rows-change行展开状态改变时触发Array<KeyType>
end-reached到达表格末尾时触发-
scroll表格被用户滚动后触发Object<ScrollParams>
rows-rendered当行被渲染后触发Object<RowsRenderedParams>
row-event-handlers当行被添加了 EventHandler 时触发Object<RowEventHandlers>

Table 方法

事件名描述参数
scrollToScroll to a given position{ scrollLeft?: number, scrollTop?: number}
scrollToLeftScroll to a given horizontal positionscrollLeft: number
scrollToTopScroll to a given vertical positionscrollTop: number
scrollToRowscroll to a given row with specified scroll strategyrow: number, strategy?: “auto” |”center” | “end” | “start” | “smart”

TIP

请注意：这些是 JavaScript 对象，所以您 不能使用 短横线命名法（kebab-case）来处理这些属性

Column 属性

属性描述类型默认值
align表格单元格内容对齐方式Alignment Virtualized Table 虚拟化表格 2.2.0 - 图25left
class列的类名String-
fixed固定列位置Boolean/ FixedDir Virtualized Table 虚拟化表格 2.2.0 - 图26false
flexGrowCSS 属性 flex grow, 仅当不是固定表时才生效Number0
flexShrinkCSS 属性 flex shrink, 仅当不是固定表时才生效Number1
headerClass自定义 header 头部类名String-
hidden此列是否不可见Boolean-
style自定义列单元格的类名，将会与 gird 单元格合并CSSProperties-
sortable设置列是否可排序Boolean-
titleHeader 头部单元格中的默认文本String-
maxWidth列的最大宽度String-
minWidth列的最小宽度String-
width *列的宽度 必填Number-
cellRenderer自定义单元格渲染器VueComponent/(props: CellRenderProps) => VNode-
headerRenderer自定义头部渲染器VueComponent/(props: HeaderRenderProps) => VNode-

类型

显示类型声明

  1. type HeaderClassGetter = (param: {
  2.   columns: Column<any>[]
  3.   headerIndex: number
  4. }) => string
  6. type HeaderPropsGetter = (param: {
  7.   columns: Column<any>[]
  8.   headerIndex: number
  9. }) => Record<string, any>
  11. type HeaderCellPropsGetter = (param: {
  12.   columns: Column<any>[]
  13.   column: Column<any>
  14.   columnIndex: number
  15.   headerIndex: number
  16.   style: CSSProperties
  17. }) => Record<string, any>
  19. type RowClassGetter = (param: {
  20.   columns: Column<any>[]
  21.   rowData: any
  22.   rowIndex: number
  23. }) => string
  25. type RowPropsGetter = (param: {
  26.   columns: Column<any>[]
  27.   rowData: any
  28.   rowIndex: number
  29. }) => Record<string, any>
  31. type CellPropsGetter = (param: {
  32.   column: Column<any>
  33.   columns: Column<any>[]
  34.   columnIndex: number
  35.   cellData: any
  36.   rowData: any
  37.   rowIndex: number
  38. }) => void
  40. type CellRenderProps<T> = {
  41.   cellData: T
  42.   column: Column<T>
  43.   columns: Column<T>[]
  44.   columnIndex: number
  45.   rowData: any
  46.   rowIndex: number
  47. }
  49. type HeaderRenderProps<T> = {
  50.   column: Column<T>
  51.   columns: Column<T>[]
  52.   columnIndex: number
  53.   headerIndex: number
  54. }
  56. type ScrollParams = {
  57.   xAxisScrollDir: 'forward' | 'backward'
  58.   scrollLeft: number
  59.   yAxisScrollDir: 'forward' | 'backward'
  60.   scrollTop: number
  61. }
  63. type CellSlotProps<T> = {
  64.   column: Column<T>
  65.   columns: Column<T>[]
  66.   columnIndex: number
  67.   depth: number
  68.   style: CSSProperties
  69.   rowData: any
  70.   rowIndex: number
  71.   isScrolling: boolean
  72.   expandIconProps?:
  73.     | {
  74.         rowData: any
  75.         rowIndex: number
  76.         onExpand: (expand: boolean) => void
  77.       }
  78.     | undefined
  79. }
  81. type HeaderSlotProps = {
  82.   cells: VNode[]
  83.   columns: Column<any>[]
  84.   headerIndex: number
  85. }
  87. type HeaderCellSlotProps = {
  88.   class: string
  89.   columns: Column<any>[]
  90.   column: Column<any>
  91.   columnIndex: number
  92.   headerIndex: number
  93.   style: CSSProperties
  94.   headerCellProps?: any
  95.   sortBy: SortBy
  96.   sortState?: SortState | undefined
  97.   onColumnSorted: (e: MouseEvent) => void
  98. }
  100. type RowSlotProps = {
  101.   columnIndex: number
  102.   rowIndex: number
  103.   data: any
  104.   key: number | string
  105.   isScrolling?: boolean | undefined
  106.   style: CSSProperties
  107. }
  109. type Data = {
  110.   [key: KeyType]: any
  111.   children?: Array<any>
  112. }
  114. type FixedData = Data
  116. type KeyType = string | number | symbol
  118. type ColumnSortParam<T> = { column: Column<T>; key: KeyType; order: SortOrder }
  120. enum SortOrder {
  121.   ASC = 'asc',
  122.   DESC = 'desc',
  123. }
  125. type SortBy = { key: KeyType; Order: SortOrder }
  126. type SortState = Record<KeyType, SortOrder>

常见问题

如何在第一列中渲染带复选框的列表？

由于可以自己定义单元格渲染器，您可以根据示例 自定义单元格渲染器 代码来渲染 checkbox，并自行管理其状态。

为什么虚拟化表提供的功能较 TableV1 少？

对于虚拟化表，我们打算减少一些功能，让用户根据需求自行实现。 整合过多的功能会让组件的代码变得难以维护，且对于大多数用户来说，基础功能就已足够。 一些主要的功能尚未开发。 我们很希望听从您的意见。 加入 Discord 频道 Virtualized Table 虚拟化表格 2.2.0 - 图27 来跟上我们最新的进展！

源代码

组件 Virtualized Table 虚拟化表格 2.2.0 - 图28 • 文档 Virtualized Table 虚拟化表格 2.2.0 - 图29

贡献者

Virtualized Table 虚拟化表格 2.2.0 - 图30 JeremyWuuuuu

Virtualized Table 虚拟化表格 2.2.0 - 图31 btea

Virtualized Table 虚拟化表格 2.2.0 - 图32 云游君

Virtualized Table 虚拟化表格 2.2.0 - 图33 Xc

Virtualized Table 虚拟化表格 2.2.0 - 图34 zz

Virtualized Table 虚拟化表格 2.2.0 - 图35 三咲智子

Virtualized Table 虚拟化表格 2.2.0 - 图36 webfansplz

Virtualized Table 虚拟化表格 2.2.0 - 图37 qiang

Virtualized Table 虚拟化表格 2.2.0 - 图38 Kim Yang

Virtualized Table 虚拟化表格 2.2.0 - 图39 SignDawn

Virtualized Table 虚拟化表格 2.2.0 - 图40 kooriookami