开发预览更新于 2026-05-10

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 室

<script setup lang="ts">
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '订单号', description: '#2026-CF-00018' },
  { term: '下单时间', description: '2026-05-09 14:23' },
  { term: '联系人', description: '陈先生' },
  { term: '电话', description: '138-0000-0000' },
  { term: '配送地址', description: '上海市浦东新区世纪大道 100 号 18A 室' },
];
</script>

<template>
  <CfDescriptionList :items="items" :term-width="100" bordered title="订单信息" />
</template>

<script setup>
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '订单号', description: '#2026-CF-00018' },
  { term: '下单时间', description: '2026-05-09 14:23' },
  { term: '联系人', description: '陈先生' },
  { term: '电话', description: '138-0000-0000' },
  { term: '配送地址', description: '上海市浦东新区世纪大道 100 号 18A 室' },
];
</script>

<template>
  <CfDescriptionList :items="items" :term-width="100" bordered title="订单信息" />
</template>

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="订单信息" />

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（默认）

姓名: 张三
邮箱: zhang@example.com
部门: 研发

layout = vertical

姓名: 张三
邮箱: zhang@example.com
部门: 研发

<script setup lang="ts">
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '姓名', description: '张三' },
  { term: '邮箱', description: 'zhang@example.com' },
  { term: '部门', description: '研发' },
];
</script>

<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">layout = horizontal（默认）</div>
      <CfDescriptionList :items="items" layout="horizontal" :term-width="80" bordered />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">layout = vertical</div>
      <CfDescriptionList :items="items" layout="vertical" bordered />
    </div>
  </div>
</template>

<script setup>
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '姓名', description: '张三' },
  { term: '邮箱', description: 'zhang@example.com' },
  { term: '部门', description: '研发' },
];
</script>

<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">layout = horizontal（默认）</div>
      <CfDescriptionList :items="items" layout="horizontal" :term-width="80" bordered />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">layout = vertical</div>
      <CfDescriptionList :items="items" layout="vertical" bordered />
    </div>
  </div>
</template>

<CfDescriptionList items={items} layout="horizontal" termWidth={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

<script setup lang="ts">
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '版本', description: 'v0.0.1' },
  { term: '协议', description: 'MIT' },
  { term: '主作者', description: 'chenqi92' },
  { term: '依赖', description: '0' },
  { term: '组件数', description: '49+' },
  { term: '更新', description: '2026-05-09' },
];
</script>

<template>
  <CfDescriptionList :items="items" :columns="3" bordered :term-width="60" />
</template>

<script setup>
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '版本', description: 'v0.0.1' },
  { term: '协议', description: 'MIT' },
  { term: '主作者', description: 'chenqi92' },
  { term: '依赖', description: '0' },
  { term: '组件数', description: '49+' },
  { term: '更新', description: '2026-05-09' },
];
</script>

<template>
  <CfDescriptionList :items="items" :columns="3" bordered :term-width="60" />
</template>

<CfDescriptionList items={items} columns={3} bordered termWidth={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

<script setup lang="ts">
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '总览', description: '在线 124 / 离线 8' },
  { term: '更新时间', description: '2026-05-09 16:00' },
];
</script>

<template>
  <div class="demo-stack">
    <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" />
  </div>
</template>

<script setup>
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '总览', description: '在线 124 / 离线 8' },
  { term: '更新时间', description: '2026-05-09 16:00' },
];
</script>

<template>
  <div class="demo-stack">
    <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" />
  </div>
</template>

<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? }。