背景

最近公司在做Vue2到Vue3的迁移，之前Vue2的版本一直在用Vuetify2作为UI framework，但是最新的Vuetify3 Beta版本还不太适合在production环境上使用：

截屏2022-05-30 下午10.51.07.png

并且Vuetify3的data table组件迟迟没有release，所以自己就参照Vuetify2的data tabel组件的API和UI写了一个，有其他和我一样想要使用Vuetify3的data tabel组件的小伙伴的话，可以先试试使用这个vue3-easy-data-table组件做为过度或者替代，目前实现的功能如下：

Website

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

Features

Buttons pagination
Dense
Item slot
Multiple selecting
Single field sorting
Searching
Server side paginate and sort
Theme color

项目地址

github.com/HC200ok/vue…

How to use

Install

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

Regist

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

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

Use

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

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

export default defineComponent({
  setup() {
    const headers: Header[] = [
      { text: "Name", value: "name" },
      { text: "Height (cm)", value: "height", sortable: true },
      { text: "Weight (kg)", value: "weight", sortable: true },
      { text: "Age", value: "age", sortable: true }
    ];

    const items: Item[] = [
      { "name": "Curry", "height": 178, "weight": 77, "age": 20 },
      { "name": "James", "height": 180, "weight": 75, "age": 21 },
      { "name": "Jordan", "height": 181, "weight": 73, "age": 22 }
    ];

    return {
      headers,
      items
    };
  },
});
</script>