vue3-easy-data-table来了

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>
复制代码

在线文档

更多相关信息请查看在线文档：hc200ok.github.io/vue3-easy-d…

项目地址

如果在使用过程中有疑问欢迎提交issues，项目地址在这里：github.com/HC200ok/vue… ，也热烈欢迎给我一颗⭐️支持我一下。