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>
复制代码
在线文档
更多相关信息请查看在线文档:hc200ok.github.io/vue3-easy-d…
项目地址
如果在使用过程中有疑问欢迎提交issues,项目地址在这里:github.com/HC200ok/vue… ,也热烈欢迎给我一颗⭐️支持我一下。