Descriptions 描述列表

列表形式展示多个字段。

基础用法

用户信息

用户名kooriookami	手机号18100000000	居住地苏州
备注学校	联系地址江苏省苏州市吴中区吴中大道 1188 号

尺寸

大默认小

带有边框

用户名	kooriookami	手机号	18100000000	居住地	苏州市
备注	学校	联系地址	江苏省苏州市吴中区吴中大道 1188 号

不带边框

用户名kooriookami	手机号18100000000	居住地苏州
备注学校	联系地址江苏省苏州市吴中区吴中大道 1188 号

vue

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

  <el-descriptions
    class="margin-top"
    title="With border"
    :column="3"
    :size="size"
    border
  >
    <template #extra>
      <el-button type="primary">Operation</el-button>
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          Username
        </div>
      </template>
      kooriookami
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          Telephone
        </div>
      </template>
      18100000000
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <location />
          </el-icon>
          Place
        </div>
      </template>
      Suzhou
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          Remarks
        </div>
      </template>
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <office-building />
          </el-icon>
          Address
        </div>
      </template>
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="margin-top"
    title="Without border"
    :column="3"
    :size="size"
    :style="blockMargin"
  >
    <template #extra>
      <el-button type="primary">Operation</el-button>
    </template>
    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
    <el-descriptions-item label="Remarks">
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="Address">
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from '@element-plus/icons-vue'

import type { ComponentSize } from 'element-plus'

const size = ref<ComponentSize>('default')

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  }
})
</script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>

垂直列表

大默认小

带边框的垂直列表

用户名	手机号	居住地
kooriookami	18100000000	苏州市
备注	联系地址
学校	江苏省苏州市吴中区吴中大道 1188 号

不带边框的垂直列表

用户名	手机号	居住地
kooriookami	18100000000	苏州市
备注	联系地址
学校	江苏省苏州市吴中区吴中大道 1188 号

合并行 2.8.1

水平列表的宽度

照片		用户名	kooriookami	手机号	18100000000
照片		居住地	苏州市	备注	学校
联系地址	江苏省苏州市吴中区吴中大道 1188 号

垂直列表的宽度

照片	用户名	手机号
	kooriookami	18100000000
	居住地	备注
	苏州市	学校
联系地址
江苏省苏州市吴中区吴中大道 1188 号

自定义样式

自定义样式列表

用户名	kooriookami	手机号	18100000000	居住地	苏州市
备注	学校	联系地址	江苏省苏州市吴中区吴中大道 1188 号

Descriptions API

Descriptions 属性

名称	描述	类型	默认值
边框	是否带有边框	`boolean`	false
列数	一行中 `Descriptions Item` 的数量	`number`	3
direction	列表的方向	`枚举`	horizontal
size	列表的大小	`枚举`	—
title	标题文本，显示在左上角	`string`	''
额外信息	额外文本，显示在右上角	`string`	''
标签宽度 2.8.8	每一列的标签宽度	`string` / `number`	—

Descriptions 插槽

名称	描述	子标签
default	自定义默认内容	Descriptions Item
title	自定义标题，显示在左上角	—
额外信息	自定义额外区域，显示在右上角	—

DescriptionsItem API

DescriptionsItem 属性

名称	描述	类型	默认值
label	标签文本	`string`	''
span	列跨度	`number`	1
行跨度 2.8.1	单元格应跨越的行数	`number`	1
width	列宽，不同行中同一列的宽度由最大值设定（如果没有 `border`，宽度包含标签和内容）	`string` / `number`	''
min-width	列最小宽度，具有 `width` 的列具有固定宽度，而具有 `min-width` 的列按比例分配宽度（如果没有 `border`，宽度包含标签和内容）	`string` / `number`	''
标签宽度 2.8.8	列标签宽度，如果不设置，将与列宽相同。优先级高于 `Descriptions` 的 `label-width`	`string` / `number`	—
align	列内容对齐方式（如果没有 `border`，对标签和内容都有效）	`枚举`	left
标签对齐方式	列标签对齐方式，如果省略，将应用上述 `align` 属性的值（如果没有 `border`，请使用 `align` 属性）	`枚举`	—
class-name	列内容的自定义类名	`string`	''
label-class-name	列标签的自定义类名	`string`	''