此網站需要開啟JavaScript
JavaScript is required

Table

資料表格。欄位定義與資料分開傳,個別欄位要客製呈現時用 #cell-<key> slot。

基本表格

CommonTableBasic

components/Common/Table/Basic.vue

傳 columns 與 rows,欄位定義沿用 constants/tables.js 的 { label, key, align, width } 慣例。

窄螢幕時橫向捲動。捲動容器帶了 tabindex="0" 與 role="region" —— 只設 overflow-x-auto 的話, 只用鍵盤的人是捲不動的。

caption 是表格的無障礙名稱, 預設 sr-only,要顯示請加 show-caption。

含客製欄位

訂單列表
訂購日期訂單編號寄送方式金額操作
2026/05/12BS-20260512-001宅配 NT$ 12,800
2026/05/09BS-20260509-014超商取貨 NT$ 3,200
2026/04/28BS-20260428-007宅配 NT$ 45,600

沒有資料

空的訂單列表
訂購日期訂單編號寄送方式金額操作
目前沒有訂單

Props

名稱型別預設值說明
columns*Array<{ label, key, align?, width?, nowrap? }>—欄位定義,沿用 constants/tables.js 的慣例
rowsArray<Object>[]資料列
captionString''表格的無障礙名稱,預設只給輔助技術讀
showCaptionBooleanfalse把 caption 顯示出來
emptyTextString'目前沒有資料'rows 為空時顯示
stickyHeadBooleanfalse表頭吸頂,表格本身可捲動時有用
rowKeyString | Function'id'取得每列唯一 key 的欄位名或函式

* 為必填

Slots

SlotSlot props說明
cell-<key>{ row, value, column, index }客製單一欄的呈現,key 對應 columns 的 key