写了一个高可定制性的 Vue3 表格组件

最近在做公司项目的 vue2 到 vue3 的迁移，vue2 的项目一直使用的 Vuetify 这个 UI 框架，用的最多的就是 Vuetify 的 data table 组件，client 模式和server-side 模式都在用，但是 Vuetify3 的进度有些慢，等了很长时间目前还处于 beta 版本，所以就借鉴 Vuetify2 的 data table 组件的 UI 和 API ，自己写了vue3-easy-data-table这个 data table 组件。项目地址在这里： https://github.com/HC200ok/vue3-easy-data-table

其实市场上已经有很多成熟的 Vue3 的组件库了，比如 naiveui ，element next 之类的，这次自己造轮子主要是想尝试用 vite+ts+vue3 这一套开发和发布一个组件。公司内部有啥比较偏的需求的话，实现起来也比较方便。

我个人觉得vue3-easy-data-table有个特点就是它的高度可定制性，非常适合前端进行二次封装。

比方说，基于 Vue.js 的插槽功能，你可以像下面的例子一样定制表格的某一栏和 loading 效果：

<EasyDataTable :headers="headers" :items="items">
    <template #team="{ teamName, teamUrl }">
        <a :href="teamUrl">{{ teamName }}</a>
    </template>
</EasyDataTable>

定制栏：

<EasyDataTable :headers="headers" :items="items">
    <template #loading>
      <img src="https://i.pinimg.com/originals/94/fd/2b/94fd2bf50097ade743220761f41693d5.gif" style="width: 100px;height: 80px;"/>
    </template>
</EasyDataTable>

定制 loading 效果：

另外，使用vue3-easy-data-table提供的颜色相关的属性，可以对 table 的各类元素的背景色，字体颜色，边框颜色等进行定制：

data table 这种组件其实还算蛮复杂的，集成了很多功能，比如搜索啊，排序啊，筛选啊等等，有的人只用功能 A ，有的人只用功能 B ，所以我开发的时候尽量保留了 js 的核心逻辑，而一些搜索框啊，筛选 menu 之类的元素的我就没有在组件内部实现，我暴露了相关的变量和方法，前端开发人员可以基于这些定制自己的搜索框等相关 UI 。一来尽量减小组件的 size ，二来从结果上来看，也算高可定制性的一种体现吧（其实是我比较懒，给我 star⭐我就加😂）

比方说，vue3-easy-data-table暴露了一些与 table footer 相关的变量和方法，利用这些变量和方法，你可以在vue3-easy-data-table的外部定制自己的 footer 来实现导航等功能：

今后也会基于 Vue.js 的插槽功能实现表头的一些定制功能。

最后贴上在线文档： https://hc200ok.github.io/vue3-easy-data-table-doc/ 欢迎使用，有建议或其他功能需求的老铁也欢迎提 issue 。