Introduction

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

两种模式

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

client-side模式

server-side模式

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

高可定制性

颜色定制

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

Item slot

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

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

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>

Footer定制

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

快速开始

安装

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

引入！

使用！

awesome！

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来了分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/14798.html

vue3-easy-data-table来了