写了一个高可定制性的 Vue3 表格组件
<p>最近在做公司项目的 vue2 到 vue3 的迁移，vue2 的项目一直使用的 Vuetify 这个 UI 框架，用的最多的就是 Vuetify 的 data table 组件，client 模式和<a href="https://vuetifyjs.com/en/components/data-tables/#server-side-paginate-and-sort" rel="nofollow">server-side 模式</a>都在用，但是 Vuetify3 的进度有些慢，等了很长时间目前还处于 beta 版本，所以就借鉴 Vuetify2 的 data table 组件的 UI 和 API ，自己写了<code>vue3-easy-data-table</code>这个 data table 组件。项目地址在这里： <a href="https://github.com/HC200ok/vue3-easy-data-table" rel="nofollow">https://github.com/HC200ok/vue3-easy-data-table</a></p>
<p>其实市场上已经有很多成熟的 Vue3 的组件库了，比如 naiveui ，element next 之类的，这次自己造轮子主要是想尝试用 vite+ts+vue3 这一套开发和发布一个组件。公司内部有啥比较偏的需求的话，实现起来也比较方便。</p>
<p>我个人觉得<code>vue3-easy-data-table</code>有个特点就是它的高度可定制性，非常适合前端进行二次封装。</p>
<p>比方说，基于 Vue.js 的<a href="https://v3.cn.vuejs.org/guide/component-slots.html#%E6%8F%92%E6%A7%BD%E5%86%85%E5%AE%B9" rel="nofollow">插槽</a>功能，你可以像下面的例子一样定制表格的某一栏和 loading 效果：</p>
<pre><code class="language-html"><EasyDataTable :headers="headers" :items="items">
<template #team="{ teamName, teamUrl }">
<a :href="teamUrl">{{ teamName }}</a>
</template>
</EasyDataTable>
</code></pre>
<p>定制栏： <img class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/demo.png"></p>
<pre><code class="language-html"><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>
</code></pre>
<p>定制 loading 效果： <img class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/374c81d363b74267ae9f2f5bfb3f2c9f~tplv-k3u1fbpfcp-watermark.image"></p>
<p>另外，使用<code>vue3-easy-data-table</code>提供的<a href="https://hc200ok.github.io/vue3-easy-data-table-doc/props/color-props.html" rel="nofollow">颜色相关的属性</a>，可以对 table 的各类元素的背景色，字体颜色，边框颜色等进行定制：</p>
<p><img alt="截屏 2022-06-10 下午 6.20.55.png" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9df092c67e54438d8f54776072a2314e%7Etplv-k3u1fbpfcp-watermark.image?"></p>
<p>data table 这种组件其实还算蛮复杂的，集成了很多功能，比如搜索啊，排序啊，筛选啊等等，有的人只用功能 A ，有的人只用功能 B ，所以我开发的时候尽量保留了 js 的核心逻辑，而一些搜索框啊，筛选 menu 之类的元素的我就没有在组件内部实现，我暴露了相关的变量和方法，前端开发人员可以基于这些定制自己的搜索框等相关 UI 。一来尽量减小组件的 size ，二来从结果上来看，也算高可定制性的一种体现吧（其实是我比较懒，给我 star⭐我就加😂）</p>
<p>比方说，<code>vue3-easy-data-table</code>暴露了一些与 table footer 相关的<a href="https://hc200ok.github.io/vue3-easy-data-table-doc/features/footer-customization.html" rel="nofollow">变量和方法</a>，利用这些变量和方法，你可以在<code>vue3-easy-data-table</code>的外部定制自己的 footer 来实现导航等功能：</p>
<p><img alt="chrome-capture-2022-5-10 (5).gif" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31d44bfb5fbc4003ac3f59acdc2e6533%7Etplv-k3u1fbpfcp-watermark.image?"></p>
<p>今后也会基于 Vue.js 的<a href="https://v3.cn.vuejs.org/guide/component-slots.html#%E6%8F%92%E6%A7%BD%E5%86%85%E5%AE%B9" rel="nofollow">插槽</a>功能实现表头的一些定制功能。</p>
<p>最后贴上在线文档： <a href="https://hc200ok.github.io/vue3-easy-data-table-doc/" rel="nofollow">https://hc200ok.github.io/vue3-easy-data-table-doc/</a> 欢迎使用，有建议或其他功能需求的老铁也欢迎提 issue 。</p>
收藏(0)
分享
相关标签：
注意：本文归作者所有，未经作者允许，不得转载
