vue 套件 vue-good-table 使用筆記

使用外部引入vue-good-table.js

<script src="vue-good-table.min.js"></script>

html 在綁定vue的底下加入 vue-good-table 的標籤

ref:綁定可直接對此table操作的名稱

colums:設定對應的欄位名稱

rows:設定對應的資料來源

在vue的data中設定colums對應欄位

• label: 對應欄位(colums headings)顯示的中文名稱
• field: 對應資料來源(rows)的欄位名稱
• sortable: 是否需要可以排序功能(預設true)
• width: 自訂欄位寬度
• tdClass: 自訂欄位class 屬性，可以客製化CSS
• type: 欄位型別(number、string、date、decimal、percentage)
• formatFn: 對此欄位設定的格式化函數，可以對此欄位的值進行計算或調整(如增加千分位顯示)
• hidden: 是否需要隱藏欄位(預設false)

sortable:true

對應的資料rows

若想在每一列增加功能按鈕，或者是超連結...等，使用以下方式建立一個template ，props.row接到的就是該列的資料

action對應到data中的field名稱

@click 可以綁定相關事件，並傳入row的資料

動態設定欄位名稱

透過label去對應你要動態修改的欄位名稱，若需要有多個動態的，第二個之後都使用v-else-if

再透過修改data中的資料來動態設定欄位名稱

原本的樣子

透過vue dev tool 去修改data 欄位名稱會跟著修改

官方文件