跳到主要內容
前端開發

BootstrapVue 表格元件的欄位設定

記錄 BootstrapVue b-table 的 fields、label 與巢狀資料顯示方式。

W

這邊記錄 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,實作時應以專案實際使用的版本為準。

分享這篇