vue-good-table是一個能幫你建立表格的套件，主要用陣列的方式建立，能幫你做升冪降冪的排序，還有一些異想不到的功能~~

此篇文章是參考:
點我

安裝

在專案資料夾開啟cmd打

npm install --save vue-good-table

安裝完後在main.js引入

import VueGoodTablePlugin from 'vue-good-table';
import 'vue-good-table/dist/vue-good-table.css'

Vue.use(VueGoodTablePlugin);

使用

在template打

<vue-good-table :columns="columns" :rows="rows"/>

columns和rows分別v-bind data裡的陣列。
columns內容:label是欄位名稱，field是要和rows裡的陣列名稱對應才會顯示值，type是資料型態，dateInputFormat為rows陣列裡的值要對應該格式，dateOutputFormat為顯示格式。
rows內容:要注意list裡面的key值要和columns裡的field一樣。

  data:()=>({
      columns: [
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          dateInputFormat: 'yyyy-MM-dd',
          dateOutputFormat: 'MMM do yy',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
        },
      ],
      rows: [
        { id:1, name:"Finnegan", age: 20, createdAt: '2010-10-05',score: 0.31343 },
        { id:2, name:"Mink", age: 24, createdAt: '2011-05-31', score: 0.88343 },
        { id:3, name:"Dick", age: 16, createdAt: '2011-08-30', score: 0.11343 },
        { id:4, name:"Jack", age: 55, createdAt: '2016-10-11', score: 0.66343 },
        { id:5, name:"Van", age: 40, createdAt: '2016-05-21', score: 0.43343 },
        { id:6, name:"Dixie", age: 20, createdAt: '2018-01-31', score: 0.04343 },
        { id:7, name:"Schizo", age: 8, createdAt: '2019-07-05', score: 0.75343 },
        { id:8, name:"Mala", age: 18, createdAt: '2012-11-29', score: 0.39343 },
        { id:9, name:"Skeeter", age: 35, createdAt: '2004-12-27', score: 0.84343 },
        { id:10, name:"Luka", age: 27, createdAt: '2014-05-16', score: 0.27643 },
      ],
  }),

這就是表格的基本樣式，點擊欄位名稱可以對欄位排序，接下來要做其他變化。

在標籤裡加入max-height會限定高度，超過則會有滾輪顯示。

<vue-good-table max-height="200px" :columns="columns" :rows="rows"/>

標籤裡若有max-height限定高度且有滾輪的情況下加入:fixed-header，則會把欄位名稱至頂，不會因滾輪往下而消失。

<vue-good-table max-height="200px" :fixed-header="true" :columns="columns" :rows="rows"/>

在標籤裡加入:line-numbers，會把資料筆數顯示出來。

<vue-good-table :line-numbers="true" :columns="columns" :rows="rows"/>

在標籤裡加入:rtl，會把資料從右至左顯示出來。

 <vue-good-table :rtl="true" :line-numbers="true" :columns="columns" :rows="rows"/>