Table 表格

結構化資料的列表展示與操作,後台產品的核心元件。使用 Element Plus 的 el-table。

設計準則

列高 46px(本站自訂,非 Element Plus 預設),表頭與內容列等高 —— 見下方列高
對齊:文字靠左、數字靠右(align="right")、日期靠左;表頭跟內容對齊方式一致
狀態欄用 Tag(small),同一狀態全產品同一色
操作欄:靠右、用 text + small 按鈕,最多露出 2–3 個,更多收進「更多」下拉;欄寬固定並 fixed="right"
斑馬紋(stripe)在列數多、欄位多時開,幫助橫向追蹤;窄表格不需要
長文字欄用 show-overflow-tooltip 單行截斷,不要讓某一欄把列高撐得參差不齊
超過一屏的長表格固定表頭(height);橫向捲動時固定關鍵欄(fixed)
空狀態用 empty slot 放 Empty,要給建立入口
表格下方右側放 Pagination 完整版
表格內的輸入元件一律 small(對應各表單元件的尺寸規範)

列高

⚠️ 這是本站自訂的高度,不是 Element Plus 預設值。

	Element Plus 預設	本站規範
`.el-table__cell` padding	`8px 0`	`11px 0`
`.cell` line-height	23px	23px(不變)
底線	1px	1px(不變)
列高	40px	46px

列高放寬到 46px 是為了讓儲存格裡放得下 small 尺寸的表單元件(Tag、Switch、Input、文字按鈕)時不顯得擁擠, 後台列表以掃讀為主,略鬆的行距也比較好追行。表頭與內容列等高,不做視覺區分。

工程端以 packages/ui/src/styles/components.scss 統一覆寫,選擇器同時蓋到 th 與 td:

scss

.el-table .el-table__cell {
  padding: 11px 0;
}

產品端引入 @accuhit/ui 即生效,RD 使用 <el-table> 不需要另外設定。需要更緊湊的列表(例如彈窗內的小表格)才用 EP 的 size="small",此時回到 EP 的算法。

46px 是「單行」的列高

列高由該列最高的那一格決定,這是 HTML 表格的天性,不需要也不應該去壓它:

儲存格內容	列高
單行(文字、Tag、Switch、按鈕…)	46px
兩行(主文字 + 次要說明)	約 66–69px(`11 + 23 + 23 + 11`)

上面那段 padding: 11px 0 已經同時涵蓋兩種情況,不必為了兩行再寫任何 CSS。

同一列裡只要有一格是兩行,整列就一起變高 —— 不要用固定高度去壓,那會讓兩行內容擠在一起
一張表格裡不要混用單行與兩行欄位,列高會參差;需要次要說明時,整個列表統一用兩行
選取欄(checkbox / radio)的內容高度是 EP 固定的 23px(.el-table-column--selection > .cell),不會把列撐高

必填欄位

⚠️ 這是本站自訂的樣式,不是 Element Plus 預設值。

可編輯表格中的必填欄位,表頭用紅色 *,與表單的必填標記一致:

	Element Plus 預設	本站規範
表頭必填標記	8px 紅色圓點(`#ff4d51`)	*紅色 ``**
顏色	`#ff4d51`(寫死)	`--el-color-danger`(與表單相同)

EP 的表格用圓點、表單用 *,同一個產品裡出現兩種必填符號,會讓人以為代表不同意思。工程端以 packages/ui/src/styles/components.scss 統一覆寫:

scss

.el-table th.el-table__cell.required > div:before {
  content: '*';
  color: var(--el-color-danger);
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
  margin-right: 4px;
  vertical-align: baseline;
}

RD 照常在欄位加 class="required" 即可,不需要另外設定。

基本用法

斑馬紋與邊框

顯示溢出工具提示

長文字單行截斷、滑過看完整內容,列高保持一致:

自訂欄位模板(狀態 Tag、數字靠右、操作欄)

自訂儲存格型別

⚠️ 以下三種不是 Element Plus 內建,是本站自訂的儲存格內容(Figma 元件庫中以 ★ 標示)。

狀態:用 Tag 還是狀態圓點?

判斷依據只有一條——這個狀態使用者能不能自己改。

	用途	判斷方式
Tag	使用者可設定、可篩選的分類與狀態	值是人決定的
狀態圓點 Status Dot	系統狀態變換 —— 使用者無法手動變更的狀態	值是系統跑出來的

「草稿 / 已完成 / 已封存」是人按下去決定的 → Tag
「同步中 / 計算中 / 更新失敗 / 待審核」是系統跑出來的 → 狀態圓點

狀態圓點後面可以接一個「查看」連結,讓使用者看系統在做什麼、或失敗原因。

同一張表格裡,同一欄只能用其中一種,不要混。

數值變動 Number Delta

用於數據的變動——人數、次數、百分比,和前一期比較的增減:

方向	圖示	顏色
上升	↑	`success`
下降	↓	`danger`
持平	−	`placeholder`

只用在「與前期比較」的數值欄。不要拿來表示狀態——那是 Tag 或狀態圓點的事。

客製槽 Swap Slot

建立新元件時的佔位:這一格要放的東西還沒有對應元件,先用 Swap Slot 標記, 等元件做出來再換掉。

虛線框只是 Figma 上給設計師的提示,不應該出現在正式交付的設計稿或實作中—— 看到它就代表還有一個元件沒補。

自訂表頭

表頭可以放搜尋框,就地過濾該欄內容:

多級表頭

同類指標收在同一組表頭下;多級表頭建議搭配 border,分組才清楚:

單選

「選一筆看詳情」的場景用 highlight-current-row,點列即選:

多選

批次操作用勾選欄;勾選後頁面上方應出現批次操作列(顯示已選筆數與批次按鈕):

排序

可排序的欄位加 sortable;列表要有預設排序(通常最新在前),不要無序呈現:

篩選

選項有限的欄位(狀態、管道)可用表頭內建篩選; 複雜的多條件篩選放在表格上方的篩選列,不要塞進表頭:

固定表頭與固定列

展開行

次要細節收進展開行,主表保持乾淨;展開內容用 Descriptions 排版:

樹形數據與懶載入

列與子列是「主活動 → 子活動」這類從屬關係時用;子項多或載入慢用 lazy 點擊才載:

表尾合計

數值報表加 show-summary 自動加總;比率欄(開信率)不可加總,需要就用 summary-method 自訂:

合併儲存格

同群組的列合併第一欄,呈現「一對多」;合併要搭配 border,範圍才清楚:

自訂索引

序號欄用 type="index";跨頁時記得加上分頁偏移,不要每頁都從 1 開始:

空狀態

Do / Don't

✅ Do	❌ Don't
數字靠右對齊	金額置中或靠左
操作欄 text+small、收進更多	一列五顆實心按鈕
狀態用 Tag 同一色	純文字狀態各頁不同色
系統跑的狀態用狀態圓點	把「同步中」做成可點的 Tag
Number Delta 只放與前期比較的增減	拿箭頭顏色來表示狀態
Swap Slot 只存在於設計階段	帶著虛線佔位框交付
長文字 show-overflow-tooltip	一欄長文把列高撐爆
列表有預設排序	無序呈現
空狀態給建立入口	「暫無資料」四個字

給工程師

完整 API 見 Element Plus Table 文件。本站規範優先於 EP 文件中的視覺建議。

Table 表格 ​

設計準則 ​

列高 ​

46px 是「單行」的列高 ​

必填欄位 ​

基本用法 ​

斑馬紋與邊框 ​

顯示溢出工具提示 ​

自訂欄位模板(狀態 Tag、數字靠右、操作欄) ​

自訂儲存格型別 ​

狀態:用 Tag 還是狀態圓點? ​

數值變動 Number Delta ​

客製槽 Swap Slot ​

自訂表頭 ​

多級表頭 ​

單選 ​

多選 ​

排序 ​

篩選 ​

固定表頭與固定列 ​

展開行 ​

樹形數據與懶載入 ​

表尾合計 ​

合併儲存格 ​

自訂索引 ​

空狀態 ​

Do / Don't ​

給工程師 ​