Descripciones

Muestra múltiples campos con formato de lista.

Uso básico

User Info

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

Tamaños

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>

Lista vertical

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

Estilos personalizados

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

Nombre	Descripción	Tipo	Default
border	con o sin borde	`boolean`	false
column	números de `ítems de la descripción` en una línea	`number`	3
direction	dirección de la lista	`enum`	horizontal
size	tamaño de la lista	`enum`	—
title	texto del título, mostrado en la parte superior izquierda	`string`	''
extra	texto extra, mostrado en la parte superior derecha	`string`	''
label-width 2.8.8	label width of every column	`string` / `number`	''

Descriptions Slots

Nombre	Descripción	Subtags
default	personaliza el contenido por defecto	Descriptions Item
title	título personalizado, mostrado en la parte superior izquierda	—
extra	área extra personalizada, mostrado en la parte superior derecha	—

DescriptionsItem API

DescriptionsItem Attributes

Nombre	Descripción	Tipo	Default
label	texto de la etiqueta	`string`	''
span	colspan de la columna	`number`	1
rowspan 2.8.1	the number of rows a cell should span	`number`	1
width	el ancho de la columna, el ancho de la misma columna en diferentes filas es establecido por el valor máximo (Si no hay `border`, width incluye etiqueta y contenido)	`string` / `number`	''
min-width	el ancho mínimo de la columna, las columnas con `width` tienen un ancho fijo, mientras que las columnas con `min-width` tiene un ancho que se distribuye en proporción (Si no hay `border`, width incluye etiqueta y contenido)	`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	alineación del contenido de la columna (Si no hay `border`, afecta tanto a la etiqueta como al contenido)	`enum`	left
label-align	alineamiento de la etiqueta de la columna, si se omite, el valor del atributo anterior `align` se aplicará (Si no hay `border`, por favor use el atributo `align`)	`enum`	''
class-name	nombre de clase personalizada del contenido de la columna	`string`	''
label-class-name	nombre de clase personalizada para la etiqueta de la columna	`string`	''