Table 表格 - 虚拟滚动
超大数据量场景下，通过虚拟滚动技术只渲染可视区域内的行，大幅提升表格性能。
纵向虚拟滚动
设置 virtual-config 的 enabled: true 即可开启虚拟滚动，配合 height 固定表格高度。默认数据量超过 100 条时自动生效。
共 10,000 条数据
ID | 姓名 | 年龄 | 邮箱 | 地址 | 日期 |
|---|
1 | 用户1 | 18 | user1@example.com | 城市1 · 街道1号 | 2024-01-01 |
2 | 用户2 | 19 | user2@example.com | 城市2 · 街道2号 | 2024-02-02 |
3 | 用户3 | 20 | user3@example.com | 城市3 · 街道3号 | 2024-03-03 |
4 | 用户4 | 21 | user4@example.com | 城市4 · 街道4号 | 2024-04-04 |
5 | 用户5 | 22 | user5@example.com | 城市5 · 街道5号 | 2024-05-05 |
6 | 用户6 | 23 | user6@example.com | 城市6 · 街道6号 | 2024-06-06 |
7 | 用户7 | 24 | user7@example.com | 城市7 · 街道7号 | 2024-07-07 |
8 | 用户8 | 25 | user8@example.com | 城市8 · 街道8号 | 2024-08-08 |
9 | 用户9 | 26 | user9@example.com | 城市9 · 街道9号 | 2024-09-09 |
纵向虚拟滚动（10,000 条数据）
设置行高
通过 virtual-config.rowHeight 设置虚拟滚动的行高，确保滚动条计算准确。支持设置为固定数值或函数（动态行高）。
ID | 姓名 | 内容 | 状态 |
|---|
1 | 用户1 | 这是一段较长的内容，用于测试不同行高的场景。 | 进行中 |
2 | 用户2 | 短内容 | 已完成 |
3 | 用户3 | 这是一段中等长度的内容描述。 | 待审核 |
4 | 用户4 | 这是一段较长的内容，用于测试不同行高的场景。 | 进行中 |
5 | 用户5 | 短内容 | 已完成 |
6 | 用户6 | 这是一段中等长度的内容描述。 | 待审核 |
7 | 用户7 | 这是一段较长的内容，用于测试不同行高的场景。 | 进行中 |
8 | 用户8 | 短内容 | 已完成 |
9 | 用户9 | 这是一段中等长度的内容描述。 | 待审核 |
自定义行高
冻结列 + 虚拟滚动
虚拟滚动可与固定列 (fixed) 同时使用，确保左右两侧的关键列始终可见。
固定列 + 虚拟滚动
排序与筛选
虚拟滚动与排序、筛选功能完全兼容。排序和筛选在内存中完成，虚拟滚动仅负责渲染优化。
共 8,000 条数据（支持排序和筛选）
ID | 姓名 | 年龄 | 部门 | 评分 |
|---|
1 | 员工1 | 20 | 技术部 | 91 |
2 | 员工2 | 21 | 产品部 | 83 |
3 | 员工3 | 22 | 设计部 | 72 |
4 | 员工4 | 23 | 运营部 | 67 |
5 | 员工5 | 24 | 技术部 | 84 |
6 | 员工6 | 25 | 产品部 | 74 |
7 | 员工7 | 26 | 设计部 | 84 |
8 | 员工8 | 27 | 运营部 | 79 |
9 | 员工9 | 28 | 技术部 | 63 |
排序 + 筛选 + 虚拟滚动
使用分组表头
虚拟滚动可以与多级表头 (children) 配合使用，支持分组列头的大数据渲染。
基本信息 | 地址信息 | |||||
|---|---|---|---|---|---|---|
ID | 姓名 | 年龄 | 省份 | 城市 | 详细地址 | 邮编 |
1 | 用户1 | 20 | 北京 | 朝阳区 | 街道1号 | 100000 |
2 | 用户2 | 21 | 上海 | 浦东新区 | 街道2号 | 100001 |
3 | 用户3 | 22 | 广东 | 天河区 | 街道3号 | 100002 |
4 | 用户4 | 23 | 浙江 | 西湖区 | 街道4号 | 100003 |
5 | 用户5 | 24 | 江苏 | 鼓楼区 | 街道5号 | 100004 |
6 | 用户6 | 25 | 北京 | 朝阳区 | 街道6号 | 100005 |
7 | 用户7 | 26 | 上海 | 浦东新区 | 街道7号 | 100006 |
8 | 用户8 | 27 | 广东 | 天河区 | 街道8号 | 100007 |
9 | 用户9 | 28 | 浙江 | 西湖区 | 街道9号 | 100008 |
分组表头 + 虚拟滚动
百万级数据量
通过虚拟滚动，即使是百万级别的数据量也能保持流畅的滚动体验。
点击按钮生成百万级数据进行虚拟滚动测试
百万级数据
API
VirtualConfig 虚拟滚动配置
通过 virtual-config 属性传入。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| enabled | 是否启用虚拟滚动 | boolean | false |
| rowHeight | 行高（固定值或函数） | number | ((row, rowIndex) => number) | 48 |
| buffer | 缓冲区行数（上下各多渲染的行数） | number | 5 |
| overscan | 预渲染行数 | number | 3 |
| columnVirtual | 是否启用列虚拟化 | boolean | false |
| columnBuffer | 列缓冲区数量 | number | 3 |
方法（通过 ref 调用）
| 方法名 | 说明 | 参数 |
|---|---|---|
| scrollTo | 滚动到指定位置 | ({ top?, left?, row?, rowIndex? }) |
| refresh | 刷新虚拟滚动（数据变化后调用） | — |
| doLayout | 重新计算表格布局 | — |
注意事项
- 必须设置
height：虚拟滚动需要固定的容器高度来计算可见区域。 - 必须设置
row-key：虚拟滚动依赖行唯一标识来追踪渲染。 rowHeight要准确：虚拟滚动根据行高计算滚动位置和可见范围，设置不准确可能导致滚动条跳动。- 数据量阈值：默认数据量超过 100 条才会真正启用虚拟渲染，少于 100 条时正常渲染。
- 兼容性：虚拟滚动与排序、筛选、固定列、分组表头等功能完全兼容。