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	自定义默认内容	描述列表的内容
title	自定义标题，显示在左上方	—
额外信息	自定义额外区域，显示在右上方	—

DescriptionsItem API

DescriptionsItem 属性

名称	描述	类型	默认值
label	标签文本	`string`	''
span	列的数量	`number`	1
行合并 2.8.1	单元格应跨越的行数	`number`	1
width	列的宽度，不同行中同一列的宽度按最大值设定 (如果没有 `border`，宽度包含标签和内容)	`string` / `number`	''
最小宽度	列的最小宽度，带 `width` 的列其宽度会固定，而带 `min-width` 的列会根据剩余宽度按比例分配 (如果没有`border`，宽度包含标签和内容)	`string` / `number`	''
标签宽度 2.8.8	列标签的宽度，未设置时，宽度自适应。优先级高于 `Descriptions` 的 `label-width`	`string` / `number`	''
align	列内容的对齐方式 (若无 `border`，同时对标签和内容生效)	`枚举`	left
标签对齐	列标签的对齐方式，若不设置该项，则使用上面 `align` 的值 (若无 `border`，请使用 `align` 属性)	`枚举`	—
类名	列内容自定义类名	`string`	''
标签类名	列标签自定义类名	`string`	''