描述

以列表形式显示多个字段。

基本用法

User Info

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

尺寸

LargeDefaultSmall

With border

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

Without border

Usernamekooriookami	Telephone18100000000	PlaceSuzhou
Remarks	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 type { ComponentSize } from 'element-plus-mobile'

import Iphone from '~icons/ep/iphone'
import Location from '~icons/ep/location'
import OfficeBuilding from '~icons/ep/office-building'
import Tickets from '~icons/ep/tickets'
import User from '~icons/ep/user'

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>

垂直列表

LargeDefaultSmall

Vertical list with border

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

Vertical list without border

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

行距 2.8.1

Width horizontal list

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

Width vertical list

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

定制风格

Customized style list

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

描述 API

描述属性

| 名称 | 描述 | 类型 | 默认 | | ----------------- | ---------------------- | ---------------------------------------------- | ------- | --- | | 边框 | 有或无边框 | 布尔值 | 假 | | 专栏 | | 一行中有多个 Descriptions Item | 数字 | 3 | | 方向 | 列表方向 | 枚举 | 水平 | | 尺寸 | 列表大小 | 枚举 | — | | 标题 | 标题文本，显示在左上角 | 字符串 | '' | | 额外 | 额外文本，显示在右上角 | 字符串 | '' | | 标签宽度 2.8.8 | 每列标签宽度 | 字符串 / 数字 | — |

描述插槽

名称	描述	子标签
默认	自定义默认内容	描述项目
标题	自定义标题，显示在左上角	—
额外	自定义额外区域，显示在右上角	—

描述项 API

描述项目属性

| 名称 | 描述 | 类型 | 默认 | | ----------------- | ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------- | ------------------- | --- | | 标签 | 标签文字 | 字符串 | '' | | 跨度 | 列的 colspan | 数字 | 1 | | 行距 2.8.1 | 单元格应跨越的行数 | 数字 | 1 | | 宽度 | 列宽，不同行同一列的宽度设置最大值（如果没有border，则宽度包含标签和内容） | 字符串 / 数字 | '' | | 最小宽度 | 列最小宽度，width 的列具有固定宽度，而 min-width 的列具有按比例分布的宽度（如果没有 border，则宽度包含标签和内容） | 字符串 / 数字 | '' | | 标签宽度 2.8.8 | 列标签宽度，如果不设置，将与列的宽度相同。 | Descriptions 的优先级高于 label-width | 字符串 / 数字 | — | | 对齐 | 列内容对齐（如果没有border，对标签和内容均有效） | 枚举 | 左 | | 标签对齐 | 列标签对齐方式，如果省略，将应用上述align属性的值（如果没有border，请使用align属性） | 枚举 | — | | 类名 | 栏目内容自定义类名 | 字符串 | '' | | 标签类别名称 | 列标签自定义类名 | 字符串 | '' |

描述物品槽位

名称	描述
默认	自定义默认内容
标签	定制标签

Collapse 折叠面板

Empty 空状态

描述 ​

基本用法 ​

尺寸 ​

垂直列表 ​

行距 2.8.1 ​

定制风格 ​

描述 API ​

描述属性 ​

描述 插槽 ​

描述项 API ​

描述项目属性 ​

描述物品槽位 ​

描述