Descriptions 描述列表
成组展示多个只读字段,常用于详情页 / 资料卡。
何时使用
- 详情页展示订单 / 用户 / 资源的属性。
- 接口返回的多字段以"标签 + 值"形式呈现。
基本使用
items 描述每条字段;默认 column=3 三列均分。
带边框
bordered 切换为表格风格,每个 cell 都带边框,便于阅读。
控制列数
column 改变列数;某项的 span 可让它跨多列。
不同尺寸
size:small / default / middle,影响 padding 和字号。
纵向布局
layout="vertical" 把"标签 / 值"上下排,常用于较长内容。
隐藏冒号 / 自定义样式
colon=false 隐藏冒号;每项可单独传 labelStyle / contentStyle。
API
Descriptions Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | string | '' | 顶部标题 |
| extra | string | '' | 标题右端附加内容 |
| bordered | boolean | false | 表格风格的边框 |
| column | number | 3 | 列数 |
| size | 'small' | 'default' | 'middle' | 'default' | 尺寸 |
| layout | 'horizontal' | 'vertical' | 'horizontal' | label / value 排布 |
| colon | boolean | true | 显示冒号 |
| items | DescriptionsItem[] | — | 描述项数据 |
DescriptionsItem
| 字段 | 类型 | 说明 |
|---|---|---|
| label | string | 标签 |
| value | string | number | 值 |
| span | number | 跨列数(默认 1) |
| labelStyle | CSSProperties | 单项 label 样式 |
| contentStyle | CSSProperties | 单项内容样式 |