Virtualized Table 虚拟化表格
在前端开发领域，表格一直都是一个高频出现的组件，尤其是在中后台和数据分析场景。但是，对于 Table V1 来说，当一屏里超过 1000 条数据记录时，就会出现卡顿等性能问题，体验不是很好。
通过虚拟化表格组件，超大数据渲染将不再是一个头疼的问题。
提示
该组件仍在测试中，生产环境使用可能有风险。若您发现了 bug 或问题，请于 GitHub 报告给我们以便修复。同时，有一些 API 并未在此文档中提及，因为部分还没有开发完全，因此我们不在此提及。
即使虚拟化的表格是高效的，但是当数据负载过大时，网络和内存容量也会成为您应用程序的瓶颈。因此请牢记，虚拟化表格永远不是最完美的解决方案，请考虑数据分页、过滤器等优化方案。
ts
import { createApp } from 'vue'
import { ElTableV2, ElAutoResizer } from '@szhn/dh-design-pc'
const app = createApp()
app.use(ElTableV2)
app.use(ElAutoResizer)基础用法
让我们演示虚拟化表的性能，用 10 列和 1000 行渲染一个基本示例。
固定列
通过列配置中的 fixed: 'left' | 'right' 让列在横向滚动时保持固定。
排序
通过列配置中的 sortable 以及表格的 sort-state 受控实现排序交互。
自定义单元格渲染器
当然，您可以根据您的需要呈现表格单元格。这是如何自定义您的单元格的简单例子。
API
TableV2 Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| columns | 列配置 | array | — |
| data | 表格数据 | array | — |
| width | 表格宽度 | number | — |
| height | 表格高度 | number | — |
| fixed | 是否有固定列 | boolean | false |
| row-height | 行高 | number | 50 |
| header-height | 表头高度 | number / number[] | 50 |
| estimated-row-height | 动态行高下的估算值 | number | — |
| sort-state | 受控排序状态 | object | — |
TableV2 Events
| 事件名 | 说明 |
|---|---|
| column-sort | 点击列头排序时触发 |
| row-click | 行点击时触发 |
| scroll | 滚动时触发 |
Column 配置（常用）
| 字段 | 说明 |
|---|---|
| key / dataKey | 列 key 与对应数据字段 |
| title | 表头标题 |
| width | 列宽 |
| fixed | 是否固定 |
| sortable | 是否可排序 |
| cellRenderer | 自定义单元格渲染函数 |
| headerCellRenderer | 自定义表头渲染函数 |
更多细节参见 Element Plus Virtualized Table 文档。