Descriptions

Display multiple fields in list form.

Basic usage

User Info

Usernamekooriookami	Telephone18100000000	PlaceSuzhou
RemarksSchool	Address No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Sizes

LargeDefaultSmall

With border

Username	kooriookami	Telephone	18100000000	Place	Suzhou
Remarks	School	Address	No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Without border

Usernamekooriookami	Telephone18100000000	PlaceSuzhou
RemarksSchool	Address No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

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>

Vertical List

LargeDefaultSmall

Vertical list with border

Username	Telephone	Place
kooriookami	18100000000	Suzhou
Remarks	Address
School	No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Vertical list without border

Username	Telephone	Place
kooriookami	18100000000	Suzhou
Remarks	Address
School	No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Rowspan 2.8.1

Width horizontal list

Photo		Username	kooriookami	Telephone	18100000000
Photo		Place	Suzhou	Remarks	School
Address	No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Width vertical list

Photo	Username	Telephone
	kooriookami	18100000000
	Place	Remarks
	Suzhou	School
Address
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Customized Style

Customized style list

Username	kooriookami	Telephone	18100000000	Place	Suzhou
Remarks	School	Address	No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Descriptions API

Descriptions Attributes

Name	Description	Type	Default
border	with or without border	`boolean`	false
column	numbers of `Descriptions Item` in one line	`number`	3
direction	direction of list	`enum`	horizontal
size	size of list	`enum`	—
title	title text, display on the top left	`string`	''
extra	extra text, display on the top right	`string`	''
label-width 2.8.8	label width of every column	`string` / `number`	—

Descriptions Slots

Name	Description	Subtags
default	customize default content	Descriptions Item
title	custom title, display on the top left	—
extra	custom extra area, display on the top right	—

DescriptionsItem API

DescriptionsItem Attributes

Name	Description	Type	Default
label	label text	`string`	''
span	colspan of column	`number`	1
rowspan 2.8.1	the number of rows a cell should span	`number`	1
width	column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)	`string` / `number`	''
min-width	column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content)	`string` / `number`	''
label-width 2.8.8	column label width, if not set, it will be the same as the width of the column. Higher priority than the `label-width` of `Descriptions`	`string` / `number`	—
align	column content alignment (If no `border`, effective for both label and content)	`enum`	left
label-align	column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)	`enum`	—
class-name	column content custom class name	`string`	''
label-class-name	column label custom class name	`string`	''