介紹完自行開發的元件後，本篇將介紹其他由社群提供的第三方開源套件——Easy Data Table。該元件專為 Vue 3 開發，方便建立資料表格，支援基本的排序、分頁與選取功能，是專案中相當常用的元件之一。以下將以「列出員工查詢功能」為範例說明使用方式。

1. 請先安裝 vue3-easy-data-table 元件。

npm install vue3-easy-data-table

2. 前端 TypeScript 部分，先 import 所需元件，並在 onMounted 中準備相關模擬資料。

<script setup lang="ts">
import { ref ,onMounted ,defineEmits} from 'vue';
import type { Header, Item } from 'vue3-easy-data-table'; 
import 'vue3-easy-data-table/dist/style.css';
import EasyDataTable from 'vue3-easy-data-table';
const themeColor = ref('rgb(var(--v-theme-primary))');

export interface empDto {
  userId: string;//emp 帳號
  userName: string;//emp 姓名
  deptName?: string; //所屬單位
  deptId?: string;//所屬單位代碼
  compNm?: string;//所屬公司名稱
}
//模擬員工資料
const EmpDatas: empDto[] = [
  {
    userId: 'emp001',
    userName: '王小明',
    deptName: '資訊部',
    deptId: 'D001',
    compNm: '台灣分公司',
  },
  {
    userId: 'emp002',
    userName: '李美麗',
    deptName: '人資部',
    deptId: 'D002',
    compNm: '台灣分公司',
  },
  {
    userId: 'emp003',
    userName: '陳大華',
    deptName: '財務部',
    deptId: 'D003',
    compNm: '台灣分公司',
  },
  {
    userId: 'emp004',
    userName: '林志強',
    deptName: '行銷部',
    deptId: 'D004',
    compNm: '台灣分公司',
  },
  {
    userId: 'emp005',
    userName: '張玉珍',
    deptName: '研發部',
    deptId: 'D005',
    compNm: '台灣分公司',
  },
];
//Data 
const headers: Header[] = [
  { text: '公司', value: 'compNm', sortable: true }, 
  { text: '部門', value: 'deptName', sortable: true },
  { text: '姓名', value: 'userName', sortable: true},
];

</script>

3. 在 Vue 的 template 區塊中，加入 EasyDataTable 元件，並將 items 綁定至 queryEmpList。

<template>
  <div>
    <v-dialog v-model="dialog" scrollable width="800px">
      <v-card>
        <v-card-text style="height: 400px" class="overflow-auto">
          <EasyDataTable
            :headers="headers"
            :items="empList"
            table-class-name="customize-table"
            :theme-color="themeColor"
            :rows-per-page="10"
            alternating
          >
          </EasyDataTable>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<style scoped>
.headline {
  font-weight: bold;
}
.d-flex {
  display: flex;
}
.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.clickable-link {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

</style>

驗證結果

圖19-1：透過 EasyDataTable 元件來呈現資料內容結果。

圖19-2：EasyDataTable 與資料 DTO 之間的連動關係。

其他進階參數

以下常用的參數，可以輕鬆控制表格排版與功能