Descriptions 描述列表

以列表形式展示多个字段，适合后台详情页、项目档案、用户资料和订单信息等只读信息展示场景。

基础用法

使用 el-descriptions 包裹多个 el-descriptions-item。title 显示标题，label 显示字段名。

项目信息

项目名称HOME VISTA 展厅改造	客户名称上海示例家居有限公司	项目城市上海
项目状态进行中	项目地址上海市徐汇区漕溪北路示例园区 8 号楼

vue

<el-descriptions title="项目信息">
  <el-descriptions-item label="项目名称">HOME VISTA 展厅改造</el-descriptions-item>
  <el-descriptions-item label="客户名称">上海示例家居有限公司</el-descriptions-item>
  <el-descriptions-item label="项目城市">上海</el-descriptions-item>
  <el-descriptions-item label="项目状态">
    <el-tag size="small">进行中</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="项目地址">
    上海市徐汇区漕溪北路示例园区 8 号楼
  </el-descriptions-item>
</el-descriptions>

带边框

设置 border 后，描述列表会展示为表格式边框。通过 column 控制每行展示的字段数量。

报价概览

报价编号	QT-2026-0527	报价版本	V3	审批状态	已通过
报价金额	¥ 286,000.00	有效期	2026-06-30	负责人	周明

vue

<el-descriptions title="报价概览" :column="3" border>
  <template #extra>
    <el-button type="primary" size="small">查看详情</el-button>
  </template>
  <el-descriptions-item label="报价编号">QT-2026-0527</el-descriptions-item>
  <el-descriptions-item label="报价版本">V3</el-descriptions-item>
  <el-descriptions-item label="审批状态">
    <el-tag size="small" type="success">已通过</el-tag>
  </el-descriptions-item>
</el-descriptions>

不同尺寸

size 支持 large、default、small 三种尺寸。尺寸会影响列表行高和内部间距，可根据详情页密度选择。

LargeDefaultSmall

团队信息

负责人	林舟	联系电话	18100000000	所在城市	苏州
角色	项目经理	所属部门	交付管理中心

vue

<template>
  <el-radio-group v-model="size">
    <el-radio-button value="large">Large</el-radio-button>
    <el-radio-button value="default">Default</el-radio-button>
    <el-radio-button value="small">Small</el-radio-button>
  </el-radio-group>

  <el-descriptions title="团队信息" :column="3" :size="size" border>
    <template #extra>
      <el-button type="primary" size="small">编辑</el-button>
    </template>
    <el-descriptions-item label="负责人">林舟</el-descriptions-item>
    <el-descriptions-item label="联系电话">18100000000</el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const size = ref('default')
</script>

垂直列表

设置 direction="vertical" 后，字段名和字段值会上下排列，适合字段值较长或需要强调字段标题的展示区域。

交付节点

方案确认	报价提交	物料齐套
2026-05-20	2026-05-24	预计 2026-06-10
风险等级	节点说明
中	当前等待供应商确认灯具到货时间。

vue

<el-descriptions title="交付节点" direction="vertical" :column="4" border>
  <el-descriptions-item label="方案确认">2026-05-20</el-descriptions-item>
  <el-descriptions-item label="报价提交">2026-05-24</el-descriptions-item>
  <el-descriptions-item label="物料齐套" :span="2">预计 2026-06-10</el-descriptions-item>
  <el-descriptions-item label="风险等级">
    <el-tag size="small" type="warning">中</el-tag>
  </el-descriptions-item>
</el-descriptions>

单元格跨行

通过 rowspan 让单元格跨越多行，配合 width 可以放置图片、头像或重要摘要。

客户资料

头像	HV	客户名称	上海示例家居有限公司	客户等级	重点客户
头像	HV	联系人	陈安	联系电话	18100000000
客户地址	上海市徐汇区漕溪北路示例园区 8 号楼

vue

<el-descriptions title="客户资料" :column="3" border>
  <el-descriptions-item :rowspan="2" :width="120" label="头像" align="center">
    <el-avatar shape="square" :size="72">HV</el-avatar>
  </el-descriptions-item>
  <el-descriptions-item label="客户名称">上海示例家居有限公司</el-descriptions-item>
  <el-descriptions-item label="客户等级">
    <el-tag size="small" type="success">重点客户</el-tag>
  </el-descriptions-item>
</el-descriptions>

自定义样式

可以通过 label-align、align、label-class-name、class-name、width 等属性控制单元格样式。

自定义样式列表

项目编号	PRJ-2026-0527	优先级	高	负责人	林舟
备注	该项目为重点交付项目，需在每周例会同步风险和进展。

vue

<el-descriptions title="自定义样式列表" :column="3" border>
  <el-descriptions-item
    label="项目编号"
    label-align="right"
    align="center"
    label-class-name="descriptions-label-soft"
    class-name="descriptions-content-soft"
    width="160px"
  >
    PRJ-2026-0527
  </el-descriptions-item>
</el-descriptions>

Descriptions API

Descriptions 属性

属性名	说明	类型	默认值
border	是否带有边框	`boolean`	`false`
column	一行 `Descriptions Item` 的数量	`number`	`3`
direction	排列方向	`horizontal \| vertical`	`horizontal`
size	列表尺寸	`large \| default \| small`	`-`
title	标题文本，显示在左上方	`string`	`''`
extra	操作区文本，显示在右上方	`string`	`''`
label-width	每一列的标签宽度	`string \| number`	`-`

Descriptions 插槽

插槽名	说明	子标签
default	自定义默认内容	Descriptions Item
title	自定义标题，显示在左上方	`-`
extra	自定义操作区，显示在右上方	`-`

Descriptions Item API

Descriptions Item 属性

属性名	说明	类型	默认值
label	标签文本	`string`	`''`
span	列的数量	`number`	`1`
rowspan	单元格跨越的行数	`number`	`1`
width	列宽度，不同行相同列的宽度按最大值设定	`string \| number`	`''`
min-width	列最小宽度，剩余宽度会按比例分配	`string \| number`	`''`
label-width	当前列的标签宽度，优先级高于 Descriptions 的 `label-width`	`string \| number`	`-`
align	列内容对齐方式	`left \| center \| right`	`left`
label-align	列标签对齐方式，未设置时跟随 `align`	`left \| center \| right`	`-`
class-name	列内容自定义类名	`string`	`''`
label-class-name	列标签自定义类名	`string`	`''`

Descriptions Item 插槽

插槽名	说明
default	自定义默认内容
label	自定义标签

Descriptions 描述列表 ​

基础用法 ​

带边框 ​

不同尺寸 ​

垂直列表 ​

单元格跨行 ​

自定义样式 ​

Descriptions API ​

Descriptions 属性 ​

Descriptions 插槽 ​

Descriptions Item API ​

Descriptions Item 属性 ​

Descriptions Item 插槽 ​