這邊記錄 BootstrapVue 的 Table 調整方式。
fields
key 要與取得資料中的物件欄位一致;label 可以自行命名,會顯示在 table header。
fields: [
{ key: "name", label: "名稱" },
{ key: "price", label: "價格" },
];
巢狀資料
如果取得的資料有好幾層,可以在欄位模板裡使用 v-for:
<b-table :items="items" :fields="fields">
<template #cell(tags)="data">
<span v-for="tag in data.item.tags" :key="tag">
{{ tag }}
</span>
</template>
</b-table>
參考資料:BootstrapVue Table
2026 年後記
原文主要以三張截圖記錄 fields 與巢狀資料的用法,整理時改成文字與最小範例。這是 Vue 2 時代的 BootstrapVue API,實作時應以專案實際使用的版本為準。