element-plus/website/docs/zh-CN/descriptions.md

Descriptions 描述列表

列表形式展示多个字段。

基础用法

:::demo

<el-descriptions title="用户信息">
  <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
  <el-descriptions-item label="手机号">18100000000</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="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>

:::

不同尺寸

:::demo

<template>
  <el-radio-group v-model="size">
    <el-radio label="">默认</el-radio>
    <el-radio label="medium">中等</el-radio>
    <el-radio label="small">小型</el-radio>
    <el-radio label="mini">超小</el-radio>
  </el-radio-group>

  <el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
    <template #extra>
      <el-button type="primary" size="small">操作</el-button>
    </template>
    <el-descriptions-item>
      <template #label>
        <i class="el-icon-user"></i>
        用户名
      </template>
      kooriookami
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      18100000000
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <i class="el-icon-location-outline"></i>
        居住地
      </template>
      苏州市
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <i class="el-icon-tickets"></i>
        备注
      </template>
      <el-tag size="small">学校</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <i class="el-icon-office-building"></i>
        联系地址
      </template>
      江苏省苏州市吴中区吴中大道 1188 号
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions class="margin-top" title="无边框列表" :column="3" :size="size">
    <template #extra>
      <el-button type="primary" size="small">操作</el-button>
    </template>
    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
    <el-descriptions-item label="手机号">18100000000</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="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
  </el-descriptions>
</template>

<script>
  export default {
    data() {
      return {
        size: ''
      };
    }
  }
</script>

:::

垂直列表

:::demo

<el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border>
  <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
  <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
  <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
  <el-descriptions-item label="备注">
    <el-tag size="small">学校</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>

<el-descriptions class="margin-top" title="垂直无边框列表" :column="4" direction="vertical">
  <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
  <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
  <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
  <el-descriptions-item label="备注">
    <el-tag size="small">学校</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>

:::

自定义样式

:::demo

<el-descriptions title="自定义样式列表" :column="3" border>
  <el-descriptions-item label="用户名" label-align="right" align="center" label-class-name="my-label" class-name="my-content" width="150px">kooriookami</el-descriptions-item>
  <el-descriptions-item label="手机号" label-align="right" align="center">18100000000</el-descriptions-item>
  <el-descriptions-item label="居住地" label-align="right" align="center">苏州市</el-descriptions-item>
  <el-descriptions-item label="备注" label-align="right" align="center">
    <el-tag size="small">学校</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="联系地址" label-align="right" align="center">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>

:::

Descriptions Attributes

参数	说明	类型	可选值	默认值
border	是否带有边框	boolean	—	false
column	一行 Descriptions Item 的数量	number	—	3
direction	排列的方向	string	vertical / horizontal	horizontal
size	列表的尺寸	string	medium / small / mini	—
title	标题文本，显示在左上方	string	—	—
extra	操作区文本，显示在右上方	string	—	—

Descriptions Slots

Name	说明
title	自定义标题，显示在左上方
extra	自定义操作区，显示在右上方

Descriptions Item Attributes

参数	说明	类型	可选值	默认值
label	标签文本	string	—	—
span	列的数量	number	—	1
width	列的宽度，不同行相同列的宽度按最大值设定（如无 border ，宽度包含标签与内容）	string / number	—	—
min-width	列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列（如无 border，宽度包含标签与内容）	string / number	—	—
align	列的内容对齐方式（如无 border，对标签和内容均生效）	string	left / center / right	left
label-align	列的标签对齐方式，若不设置该项，则使用内容的对齐方式（如无 border，请使用 align 参数）	string	left / center / right	—
class-name	列的内容自定义类名	string	—	—
label-class-name	列的标签自定义类名	string	—	—

Descriptions Item Slots

Name	说明
label	自定义标签文本