引言
在日常业务开发中，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
完整的类型推导
只需要定义数据类型，组件即可自动推导表格行类型，在模板中也可以获得完整的类型提示。
内置滚动加载
VTable 内置滚动加载能力，只需要监听事件即可实现数据追加，无需手动处理 DOM 滚动逻辑。
单元格缓存优化
通过单元格缓存机制，避免在表格状态变化时触发无效重绘，从而显著提升性能表现。
默认支持虚拟滚动
VTable 默认支持虚拟滚动，无需手动开启即可在大数据量场景下保持流畅滚动体验。
丰富的双向绑定
表格内部状态（如筛选、分页、排序、展开、选择、列宽等）均支持双向绑定，便于在受控模式下统一管理和同步状态。
内置组件高度自定义
内置组件可完全替换，兼容主流 UI 库，提供插槽扩展机制，支持深度定制化。
常用功能支持
- 可选择
- 可展开
- 可拖拽列
- tree 结构
- 合并单元格
- 表头分组
- 等等
更多功能可移步 官网 具体了解。
结尾
VTable 最初是笔者基于公司内部业务场景开发的，因此某些特殊场景可能还没有完全覆盖。
如果你在使用过程中发现问题或者有新的需求，欢迎提出 Issue 或 PR，我会尽快补齐所缺失的功能。
如果这个项目对你有所帮助，也欢迎在 Github 上点一个 Star ⭐
Github：
github.com/aimerthyr/v…
