Introduction

vue3-easy-data-table是一款基于Vue3.0开发的简单易用的data table组件。它在实现了多选，单项排序，搜索等基本功能之外，还提供了很多高可定制性的功能。

chrome-capture-2022-5-10 (2).gif

两种模式

vue3-easy-data-table拥有两种模式：client-side和server-side模式，client-side模式适用于所有的数据已经加载完成的情况，换句话说，你的初始请求已经从服务端取到了所有的数据。server-side模式则是指每次跳转到新页面时都需要向服务器请求新的一页的数据。client-side是默认模式，你需要同时使用server-options and server-items-length属性来切换到server-side模式。

client-side模式

chrome-capture-2022-5-10 (3).gif

server-side模式

上面分别列举了client-side模式和server-side模式的例子，可以看到与client-side模式不同的是，在server-side模式下点击新的页面按钮时会请求新页面的数据，并附带loading效果。

高可定制性

颜色定制

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

截屏2022-06-10 下午6.20.55.png

Item slot

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

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

截屏2022-06-10 下午6.27.13.png

Loading slot

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

<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>

chrome-capture-2022-5-10 (4).gif

Footer定制

vue3-easy-data-table暴露了一些与table footer相关的变量和方法，利用这些变量和方法，你可以在vue3-easy-data-table的外部定制自己的footer来实现导航等功能。别忘了，将show-footer这个prop设置成false从而不显示vue3-easy-data-table的原生footer。

chrome-capture-2022-5-10 (5).gif

快速开始

安装

npm install vue3-easy-data-table
// or
yarn add vue3-easy-data-table

注册

import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';

const app = createApp(App);
app.component('EasyDataTable', Vue3EasyDataTable);

使用

<template>
  <EasyDataTable
    :headers="headers"
    :items="items"
  />
</template>

<script lang="ts" setup>
import type { Header, Item } from "vue3-easy-data-table";

const headers: Header[] = [
  { text: "PLAYER", value: "player" },
  { text: "TEAM", value: "team"},
  { text: "NUMBER", value: "number"},
  { text: "POSITION", value: "position"},
  { text: "HEIGHT", value: "height"},
  { text: "WEIGHT (lbs)", value: "weight", sortable: true},
  { text: "LAST ATTENDED", value: "lastAttended"},
  { text: "COUNTRY", value: "country"},
];

const items: Item[] = [
  { "player": "Stephen Curry", "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/201939.png", "team": "GSW", "number": 30, "position": 'G', "height": '6-2', "weight": 185, "lastAttended": "Davidson", "country": "USA"},
  { "player": "Lebron James", "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/2544.png", "team": "LAL", "number": 6, "position": 'F', "height": '6-9', "weight": 250, "lastAttended": "St. Vincent-St. Mary HS (OH)", "country": "USA"},
  { "player": "Kevin Durant", "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/201142.png", "team": "BKN", "number": 7, "position": 'F', "height": '6-10', "weight": 240, "lastAttended": "Texas-Austin", "country": "USA"},
  { "player": "Giannis Antetokounmpo", "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/203507.png", "team": "MIL", "number": 34, "position": 'F', "height": '6-11', "weight": 242, "lastAttended": "Filathlitikos", "country": "Greece"},
];
</script>

也可以通过 CDN 引入来使用

Steps

引入！

截屏2022-07-03 下午10.17.21.png

使用！

截屏2022-07-03 下午10.17.10.png

awesome！

截屏2022-07-03 下午10.24.08.png

ES module or UMD？

项目的 build tool 用的 vite ，打包出 xxxx.es.js(ES module 格式)和 xxxx.umd.js(UMD 格式)两种结果，本来想推荐在浏览器中通过 script 标签引入 CDN 的 ES module 文件并且使用的，就像下面这样：

<link href="https://unpkg.com/vue3-easy-data-table/dist/style.css" rel="stylesheet">

<body>
    <div id="app">
        <easy-data-table :headers="headers" :items="items" />
    </div>
    
    <script type="importmap">
        { 
            "imports": {
                "vue": "https://cdn.jsdelivr.net/npm/vue@3.2.1/dist/vue.global.js",
                "vue3-easy-data-table": "https://unpkg.com/vue3-easy-data-table", 
            } 
         }
     </script>
     
     <script type="module">
         import { createApp } from 'vue';
         import Vue3EasyDataTable from 'vue3-easy-data-table';
         const App = createApp({ 
             components: { EasyDataTable: Vue3EasyDataTable, }, 
             data () { 
                 return { 
                     headers:[ { text: "PLAYER", value: "player" }, { text: "TEAM", value: "team"}, { text: "NUMBER", value: "number"}, { text: "POSITION", value: "position"}, { text: "HEIGHT", value: "indicator.height"}, { text: "WEIGHT (lbs)", value: "indicator.weight", sortable: true}, { text: "LAST ATTENDED", value: "lastAttended", width: 200}, { text: "COUNTRY", value: "country"}, ],
                     items: [ { player: "Stephen Curry", team: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"}, { player: "Lebron James", team: "LAL", number: 6, position: 'F', indicator: {"height": '6-9', "weight": 250}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"}, { player: "Kevin Durant", team: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"}, { player: "Giannis Antetokounmpo", team: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"}, ], 
                 }
             }, 
         });
        if (document.getElementById('app')) { App.mount('#app') }
    </script>
 </body>

不过 safari, firefox 等浏览器都还不支持importmap的用法:caniuse.com/?search=imp… 所以还是用了老办法，在打包入口文件 index.ts 中检测浏览器 vue 环境并全局注册 Vue3EasyDataTable 组件，github.com/HC200ok/vue…

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.createApp({}).component('Vue3EasyDataTable', DataTable);
}

然后使用的时候通过window['vue3-easy-data-table']获取。

文档

hc200ok.github.io/vue3-easy-d…

如有建议或需求，欢迎提 issue ，项目地址： github.com/HC200ok/vue…

如果觉得还不错，欢迎给我一个 github⭐支持我一下，谢谢！

vue3-easy-data-table来了