介绍

以表格形式成组展示多个只读字段，常用于详情页的信息展示。标签和内容分别独占一个单元格。

代码演示

基础使用

简单的描述列表展示。

<template>
  <s-descriptions label-width="5em">
    <s-descriptions-item label="姓名">张三</s-descriptions-item>
    <s-descriptions-item label="手机号">138****8888</s-descriptions-item>
    <s-descriptions-item label="地址">北京市朝阳区某某街道某某号</s-descriptions-item>
    <s-descriptions-item label="备注">这是一段备注信息</s-descriptions-item>
  </s-descriptions>
</template>

带边框

设置 bordered 可以显示边框，标签单元格会带有浅色背景。

<template>
  <s-descriptions bordered label-width="5em">
    <s-descriptions-item label="姓名">张三</s-descriptions-item>
    <s-descriptions-item label="手机号">138****8888</s-descriptions-item>
    <s-descriptions-item label="地址">北京市朝阳区某某街道某某号</s-descriptions-item>
  </s-descriptions>
</template>

带冒号

设置 colon 可以在标签后显示冒号。

<template>
  <s-descriptions colon label-width="5em">
    <s-descriptions-item label="姓名">张三</s-descriptions-item>
    <s-descriptions-item label="手机号">138****8888</s-descriptions-item>
    <s-descriptions-item label="地址">北京市朝阳区某某街道某某号</s-descriptions-item>
  </s-descriptions>
</template>

标签对齐

通过 label-align 设置标签文本对齐方式，也可在 DescriptionsItem 上单独覆盖。

<template>
  <s-descriptions label-width="5em" label-align="end">
    <s-descriptions-item label="姓名">张三</s-descriptions-item>
    <s-descriptions-item label="手机号">138****8888</s-descriptions-item>
    <s-descriptions-item label="地址">北京市朝阳区某某街道某某号</s-descriptions-item>
  </s-descriptions>
</template>

多列布局

通过 columns 设置每行显示的列数。

<template>
  <s-descriptions :columns="2" bordered label-width="5em">
    <s-descriptions-item label="姓名">张三</s-descriptions-item>
    <s-descriptions-item label="手机号">138****8888</s-descriptions-item>
    <s-descriptions-item label="地址">北京市朝阳区某某街道某某号</s-descriptions-item>
    <s-descriptions-item label="备注">这是一段备注信息</s-descriptions-item>
  </s-descriptions>
</template>

合并列

通过 DescriptionsItem 的 colspan 属性设置列跨度，可以跨越多列。 最后一个单元格会自动跨越剩余的列。

<template>
  <s-descriptions :columns="2" bordered label-width="4em">
    <s-descriptions-item label="地址" :colspan="2">北京市朝阳区某某街道某某号</s-descriptions-item>
    <s-descriptions-item label="姓名">张三</s-descriptions-item>
    <s-descriptions-item label="手机号">138****8888</s-descriptions-item>
  </s-descriptions>
</template>

合并行

通过 DescriptionsItem 的 rowspan 属性设置行跨度，适合在相邻行展示跨行内容，如头像。

<template>
  <s-descriptions :columns="2" bordered label-width="5em">
    <s-descriptions-item label="头像" :rowspan="2">
      <s-avatar />
    </s-descriptions-item>
    <s-descriptions-item label="姓名">张三</s-descriptions-item>
    <s-descriptions-item label="手机号">138****8888</s-descriptions-item>
    <s-descriptions-item label="地址">北京市朝阳区某某街道某某号</s-descriptions-item>
  </s-descriptions>
</template>

自定义插槽

可以通过插槽自定义标签和内容。

<template>
  <s-descriptions bordered label-width="6em">
    <s-descriptions-item>
      <template #label>
        <div class="flex items-center gap-2">
          <demo-icon name="person-circle" />
          <span>姓名</span>
        </div>
      </template>
      张三
    </s-descriptions-item>
    <s-descriptions-item label="手机号">
      <template #label>
        <div class="flex items-center gap-1">
          <demo-icon name="phone" />
          <span>姓名</span>
        </div>
      </template>
      <s-button variant="link" compact>138****8888</s-button>
    </s-descriptions-item>
  </s-descriptions>
</template>

API

DescriptionsProps

属性	描述	类型	默认值
bordered	是否显示边框	boolean	false
colon	标签后是否显示冒号	boolean	false
columns	每行列数	number	1
labelWidth	标签单元格宽度	string	-
labelAlign	标签文本对齐方式	'start' | 'center' | 'end'	-

DescriptionsSlots

插槽	描述	属性
default	自定义默认内容	-

DescriptionsEmits

暂无事件。

DescriptionsItemProps

属性	描述	类型	默认值
label	标签文本	string	-
colspan	列跨度	number	1
rowspan	行跨度	number	1
labelWidth	标签单元格宽度，可覆盖上级设置	string	-
labelAlign	标签文本对齐方式，可覆盖上级设置	'start' | 'center' | 'end'	-

DescriptionsItemSlots

插槽	描述	属性
default	自定义内容	-
label	自定义标签内容	-

主题定制

样式变量

CSS 变量	值
--s-descriptions-label-color	var(--s-text-color-tertiary)
--s-descriptions-label-font-size	var(--s-font-size)
--s-descriptions-label-bg	var(--s-fill-color-fourth)
--s-descriptions-content-color	var(--s-text-color-primary)
--s-descriptions-content-font-size	var(--s-font-size)
--s-descriptions-item-padding-y	var(--s-size-xs)
--s-descriptions-item-padding-x	var(--s-size-sm)
--s-descriptions-border-color	var(--s-border-color)