引言

在日常业务开发中，Table 几乎是使用频率最高的组件之一。

很多团队都会选择 Ant Design Vue 或 Element Plus，但在实际项目中使用久了之后，你会发现在类型提示、数据加载方式以及性能优化等方面它们二者仍存在不少问题。

下面我们一起简单盘点一下这些常见问题。

Ant Design Vue 和 Element Plus 的一些问题

1. 模板类型支持有限

在代码中明明我已经显式指定了 data 的类型，可是模板依旧不支持类型提示，这会导致在开发的过程中遇到一些奇奇怪怪的问题（例如，你可能找了很久，最后发现原来是单词拼写错误）

2. 未提供滚动加载能力

有时候我们不仅需要分页展示，也希望对表格做滚动展示。此时往往需要我们手动获取 table 的 DOM 元素，并滚动事件实现数据加载。同时在 antd-vue 中，当表格是否存在垂直滚动条时，DOM 结构还会发生变化，这就需要额外做兼容处理，对使用者来说并不友好。

3. 单元格频繁发生重绘 ⭐️

我们在模板中使用 函数 时，当表格状态发生变化（例如我修改了选中状态，或者改变了折叠状态等等），会 自动触发所有单元格的重绘 。这在涉及复杂计算逻辑时，会带来明显的 性能开销 ，也是目前 最严重 的一个问题。在线链接

4. 虚拟滚动支持有限

antd-vue 默认就不支持虚拟滚动，所以压根没法使用。而 element-plus 则是另外提供了一个组件 el-table-v2 ，但是内部功能和 v1 相比差了不少，无法实现平滑替换。当然即使增加了虚拟滚动，el-table-v2 还是会在表格状态发生变化时，重绘所有单元格。

可以看到，在复杂业务场景或大数据量场景下，这些问题都会对开发体验和性能表现产生一定影响。

为了解决这些问题，我开发了一个新的高性能虚拟表格 —— VTable。

介绍 VTable

完整的类型推导

内置滚动加载

单元格缓存优化

默认支持虚拟滚动

丰富的双向绑定

内置组件高度自定义

常用功能支持

• 可选择
• 可展开
• 可拖拽列
• tree 结构
• 合并单元格
• 表头分组
• 等等

更多功能可移步 官网 具体了解。

结尾

VTable 最初是笔者基于公司内部业务场景开发的，因此某些特殊场景可能还没有完全覆盖。

如果你在使用过程中发现问题或者有新的需求，欢迎提出 Issue 或 PR，我会尽快补齐所缺失的功能。

如果这个项目对你有所帮助，也欢迎在 Github 上点一个 Star ⭐

Github： github.com/aimerthyr/v…

官网： aimerthyr.github.io/virtual-tab…