Descriptions 描述列表

以「標籤:值」成組展示詳情資料。使用 Element Plus 的 el-descriptions。

設計準則

• 詳情頁的標準元件:唯讀展示用它,不要放一排禁用的輸入框(對應 Input 規範)
• 每列 2–3 欄;欄位值可能很長(地址、備註)就降為 1–2 欄
• 帶框(border)適合密集資料;鬆散頁面可不帶框
• 空值顯示「—」,不要留白讓人以為沒載入
• title + extra 放區塊標題與操作(編輯)

基本用法

loading

尺寸

loading

垂直方向

標籤在上、值在下,適合欄位少、值較長的場景:

loading

無框線

鬆散的詳情頁用無框版本,標籤自帶冒號結尾:

loading

單元格跨行、跨欄

rowspan 給直向內容(照片),span 給橫向長內容(備註跨滿整列):

loading

自訂樣式

用 label-width / width / align 這些屬性控制欄寬與對齊,不要用 CSS 硬改:

loading

Do / Don't

✅ Do	❌ Don't
詳情用描述列表	一排禁用輸入框
每列 2–3 欄	六欄擠成表格
空值顯示「—」	空白格讓人以為壞了

給工程師

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