Appearance
项目介绍
virt-table 是一个高性能虚拟表格组件库,基于原生 DOM 实现纵向与横向双维度虚拟滚动,支持合并单元格、固定列、树形/分组/展开行等高级能力。
核心特性
- 双维度虚拟滚动 — 纵向行虚拟化 + 横向列虚拟化,轻松渲染万级行列
- 合并单元格 — 支持表头、表身、表尾的任意合并,配合 Rect 补全算法保证虚拟滚动下的正确渲染
- 固定列 — 通过 CSS
position: sticky实现左右冻结列,无额外 DOM 开销 - 树形 / 分组 / 展开行 — 灵活的数据展示方式,内部统一为扁平化列表 + 虚拟滚动
- 单元格选区 & 剪贴板 — 类电子表格的选区拖拽、复制粘贴
- 框架无关 — 核心基于原生 DOM,同时提供 Vue 3 和 React 适配层
包结构
@virt-list/core → 一维虚拟列表引擎(行窗口计算、尺寸测量)
@virt-table/vanilla → 表格核心实现(列管理、合并、固定列、横向虚拟化、选区、剪贴板)
@virt-table/vue → Vue 3 适配层
@virt-table/react → React 适配层Vue 适配层
@virt-table/vue 在 vanilla 核心之上提供 Vue 3 组件封装:
- 列配置使用
VueTableColumn,render 函数支持返回VNode - 通过
ref暴露表格实例方法 - 自动 watch
options.list变化并同步到核心 - 组件卸载时自动销毁内部实例
设计理念
| 层级 | 职责 | 设计考量 |
|---|---|---|
| VirtListCore | 纵向滚动窗口计算 | 可复用的列表引擎,表格在其上构建 2D 能力 |
| VirtTable (vanilla) | 表格 DOM + 算法 | 单一实现跨框架共享,避免三套代码维护虚拟化逻辑 |
| Vue 适配 | 渲染桥接 | Vue 用户得到 VNode 渲染,核心保持命令式高性能 |
适用场景
- 大数据量表格展示(万行 × 百列)
- 需要合并单元格的复杂报表
- 类 Excel 的电子表格应用
- 需要高度定制渲染的业务表格