介绍

stk-table-vue（stk: sticky）是一个基于 sticky 、vue、DOM 的高性能虚拟列表。适用于动态数据展示场景。

为什么要做stk-table-vue

做这个的原因，是在2022年左右，我接到了在web端展示动态数据的需求，而在当时，简单调研了一些热门的表格组件，并没有十分契合此业务场景的组件，因此决定自行实现。起初只是实现了一个基本的虚拟列表。到后来修修改改差不多三年，我发现已经慢慢具备了表格的基础功能，因此决定开源。

在初期对热门表格调研之后，我就确认了大体的方向：

保证性能优先。 性能是首要目标，组件的一些使用方式和api的设计多少会向性能妥协，因为动态数据的展示需要尽可能的高性能。
包体积控制。 用尽可能少且简单的方式实现表格的功能。
基于DOM。 基于 DOM 有利于 vue 组件库的无缝接入。而且，我十分相信dom的性能。综合各种成本考虑，舍弃了canvas的实现。
使用 css sticky 实现表格的固定列与固定头。 这个方案，使固定头与固定列的代码实现相较于覆盖另一个表格的方式，代码量大大减少。同时恰好也实现了固定列的sticky，一种全新的交互。试一试。
声明式自定义插槽。 借鉴了 ant-design-vue 表格的自定义单元格的方式，相比在 <template> 中通过 #slot 使用自定义单元格要优雅许多。
内置高亮。 使用 animation api 实现高亮动画，没有第三方库的依赖。
使用table标签。 一些组件使用了 div 来渲染表格，为获取更好的性能。但需要实现原生 <table> 的默认功能，如布局,复制，打印等行为，或需要额外很多代码，对于包体积控制不利。而性能方面，在主观感受上，div|table 的区别并不大。

表格的许多基础功能或许都不全面，但对二次开发预留了较多的定制空间，一些功能可以自行实现。

比如表头点击 筛选 功能。
对于筛选功能，考虑到实际开发中，不同的项目使用的组件库，样式都不相同，如果提供内置的筛选功能，1.可能对整体风格会造成影响。2.对包体积控制有负面效果。因此暂未实现。
排序不能点击单个箭头。
也可以通过自定义表头单元格实现。
样式可以通过.stk-table选择器下的css变量进行更改。

组件的一些设计和api参考了 vxe-table ant-design-vue navie-ui 等NB的项目，在此表示感谢。