DescriptionList 描述列表
dt / dd 风格的键值对展示 —— 横竖两种布局、多列、3 档尺寸、可描边。
基础用法
把数据填进 items：每项有 term 与 description。termWidth 控制 term 列宽（horizontal layout）。bordered 给条目之间加描边。
订单信息
- 订单号
- #2026-CF-00018
- 下单时间
- 2026-05-09 14:23
- 联系人
- 陈先生
- 电话
- 138-0000-0000
- 配送地址
- 上海市浦东新区世纪大道 100 号 18A 室
const items = [
{ term: '订单号', description: '#2026-CF-00018' },
{ term: '下单时间', description: '2026-05-09 14:23' },
{ term: '配送地址', description: '上海市浦东新区世纪大道 100 号 18A 室' },
];
<CfDescriptionList :items="items" :term-width="100" bordered title="订单信息" />const items = [
{ term: '订单号', description: '#2026-CF-00018' },
{ term: '下单时间', description: '2026-05-09 14:23' },
{ term: '配送地址', description: '上海市浦东新区世纪大道 100 号 18A 室' },
];
<CfDescriptionList items={items} termWidth={100} bordered title="订单信息" />横竖布局
layout="horizontal"（默认）—— term 与 description 同一行；适合属性表 / 详情页。
layout="vertical" —— term 在上、description 在下；适合较长的描述文案或移动端窄屏。
layout = horizontal（默认）
- 姓名
- 张三
- 部门
- 研发
layout = vertical
- 姓名
- 张三
- 部门
- 研发
<CfDescriptionList :items="items" layout="horizontal" :term-width="80" bordered />
<CfDescriptionList :items="items" layout="vertical" bordered /><CfDescriptionList items={items} layout="horizontal" termWidth={80} bordered />
<CfDescriptionList items={items} layout="vertical" bordered />多列
columns 是一个数字，控制内部 grid 的列数。item.span 让单条目跨多列。适合表头宽 / 字段多的场景。
- 版本
- v0.0.1
- 协议
- MIT
- 主作者
- chenqi92
- 依赖
- 0
- 组件数
- 49+
- 更新
- 2026-05-09
<CfDescriptionList :items="items" :columns="3" bordered :term-width="60" /><CfDescriptionList items={items} columns={3} bordered termWidth={60} />三档尺寸
size 控制字号与内距 —— sm 紧凑型 / md（默认）/ lg 详情大字。
size = sm
- 总览
- 在线 124 / 离线 8
- 更新时间
- 2026-05-09 16:00
size = md
- 总览
- 在线 124 / 离线 8
- 更新时间
- 2026-05-09 16:00
size = lg
- 总览
- 在线 124 / 离线 8
- 更新时间
- 2026-05-09 16:00
<CfDescriptionList :items="items" size="sm" bordered title="size = sm" />
<CfDescriptionList :items="items" size="md" bordered title="size = md" />
<CfDescriptionList :items="items" size="lg" bordered title="size = lg" /><CfDescriptionList items={items} size="sm" bordered title="size = sm" />
<CfDescriptionList items={items} size="md" bordered title="size = md" />
<CfDescriptionList items={items} size="lg" bordered title="size = lg" />API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
items | DescriptionItem[] | [] | 数据数组 |
layout | 'horizontal' | 'vertical' | 'horizontal' | term/description 排列方向 |
size | 'sm' | 'md' | 'lg' | 'md' | 字号 + 内距 |
columns | number | 1 | 整体列数 |
bordered | boolean | false | 整体描边 + 行分隔 |
termWidth | number | string | '120px' | term 列宽（仅 horizontal） |
title | string | ReactNode | — | 顶部标题 |
DescriptionItem：{ key?, term, description?, span? }。
反馈与讨论
DescriptionList 描述列表 的讨论