我开源了一个比 Ant Design Table 更好用的高性能虚拟表格

引言

在日常业务开发中，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 还是会在表格状态发生变化时，重绘所有单元格。