Descriptions 描述列表

列表形式展示多个字段。

基础用法

Descriptions 描述列表 - 图1

  1. <template>
  2.   <el-descriptions title="User Info">
  3.     <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
  4.     <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
  5.     <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
  6.     <el-descriptions-item label="Remarks">
  7.       <el-tag size="small">School</el-tag>
  8.     </el-descriptions-item>
  9.     <el-descriptions-item label="Address"
  10.       >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
  11.       Province</el-descriptions-item
  12.     >
  13.   </el-descriptions>
  14. </template>

不同尺寸

Descriptions 描述列表 - 图2

  1. <template>
  2.   <el-radio-group v-model="size">
  3.     <el-radio label="large">Large</el-radio>
  4.     <el-radio>Default</el-radio>
  5.     <el-radio label="small">Small</el-radio>
  6.   </el-radio-group>
  8.   <el-descriptions
  9.     class="margin-top"
  10.     title="With border"
  11.     :column="3"
  12.     :size="size"
  13.     border
  14.   >
  15.     <template #extra>
  16.       <el-button type="primary">Operation</el-button>
  17.     </template>
  18.     <el-descriptions-item>
  19.       <template #label>
  20.         <div class="cell-item">
  21.           <el-icon :style="iconStyle">
  22.             <user />
  23.           </el-icon>
  24.           Username
  25.         </div>
  26.       </template>
  27.       kooriookami
  28.     </el-descriptions-item>
  29.     <el-descriptions-item>
  30.       <template #label>
  31.         <div class="cell-item">
  32.           <el-icon :style="iconStyle">
  33.             <iphone />
  34.           </el-icon>
  35.           Telephone
  36.         </div>
  37.       </template>
  38.       18100000000
  39.     </el-descriptions-item>
  40.     <el-descriptions-item>
  41.       <template #label>
  42.         <div class="cell-item">
  43.           <el-icon :style="iconStyle">
  44.             <location />
  45.           </el-icon>
  46.           Place
  47.         </div>
  48.       </template>
  49.       Suzhou
  50.     </el-descriptions-item>
  51.     <el-descriptions-item>
  52.       <template #label>
  53.         <div class="cell-item">
  54.           <el-icon :style="iconStyle">
  55.             <tickets />
  56.           </el-icon>
  57.           Remarks
  58.         </div>
  59.       </template>
  60.       <el-tag size="small">School</el-tag>
  61.     </el-descriptions-item>
  62.     <el-descriptions-item>
  63.       <template #label>
  64.         <div class="cell-item">
  65.           <el-icon :style="iconStyle">
  66.             <office-building />
  67.           </el-icon>
  68.           Address
  69.         </div>
  70.       </template>
  71.       No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
  72.     </el-descriptions-item>
  73.   </el-descriptions>
  75.   <el-descriptions
  76.     class="margin-top"
  77.     title="Without border"
  78.     :column="3"
  79.     :size="size"
  80.     :style="blockMargin"
  81.   >
  82.     <template #extra>
  83.       <el-button type="primary">Operation</el-button>
  84.     </template>
  85.     <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
  86.     <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
  87.     <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
  88.     <el-descriptions-item label="Remarks">
  89.       <el-tag size="small">School</el-tag>
  90.     </el-descriptions-item>
  91.     <el-descriptions-item label="Address"
  92.       >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
  93.     </el-descriptions-item>
  94.   </el-descriptions>
  95. </template>
  97. <script setup lang="ts">
  98. import { computed, ref } from 'vue'
  99. import {
  100.   Iphone,
  101.   Location,
  102.   OfficeBuilding,
  103.   Tickets,
  104.   User,
  105. } from '@element-plus/icons-vue'
  107. const size = ref('')
  108. const iconStyle = computed(() => {
  109.   const marginMap = {
  110.     large: '8px',
  111.     default: '6px',
  112.     small: '4px',
  113.   }
  114.   return {
  115.     marginRight: marginMap[size.value] || marginMap.default,
  116.   }
  117. })
  118. const blockMargin = computed(() => {
  119.   const marginMap = {
  120.     large: '32px',
  121.     default: '28px',
  122.     small: '24px',
  123.   }
  124.   return {
  125.     marginTop: marginMap[size.value] || marginMap.default,
  126.   }
  127. })
  128. </script>
  130. <style scoped>
  131. .el-descriptions {
  132.   margin-top: 20px;
  133. }
  134. .cell-item {
  135.   display: flex;
  136.   align-items: center;
  137. }
  138. .margin-top {
  139.   margin-top: 20px;
  140. }
  141. </style>

垂直列表

Descriptions 描述列表 - 图3

  1. <template>
  2.   <el-radio-group v-model="size">
  3.     <el-radio label="large">Large</el-radio>
  4.     <el-radio>Default</el-radio>
  5.     <el-radio label="small">Small</el-radio>
  6.   </el-radio-group>
  8.   <el-descriptions
  9.     title="Vertical list with border"
  10.     direction="vertical"
  11.     :column="4"
  12.     :size="size"
  13.     border
  14.   >
  15.     <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
  16.     <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
  17.     <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
  18.     <el-descriptions-item label="Remarks">
  19.       <el-tag size="small">School</el-tag>
  20.     </el-descriptions-item>
  21.     <el-descriptions-item label="Address"
  22.       >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
  23.     </el-descriptions-item>
  24.   </el-descriptions>
  26.   <el-descriptions
  27.     title="Vertical list without border"
  28.     :column="4"
  29.     :size="size"
  30.     direction="vertical"
  31.     :style="blockMargin"
  32.   >
  33.     <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
  34.     <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
  35.     <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
  36.     <el-descriptions-item label="Remarks">
  37.       <el-tag size="small">School</el-tag>
  38.     </el-descriptions-item>
  39.     <el-descriptions-item label="Address"
  40.       >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
  41.     </el-descriptions-item>
  42.   </el-descriptions>
  43. </template>
  45. <script setup lang="ts">
  46. import { computed, ref } from 'vue'
  48. const size = ref('')
  49. const blockMargin = computed(() => {
  50.   const marginMap = {
  51.     large: '32px',
  52.     default: '28px',
  53.     small: '24px',
  54.   }
  55.   return {
  56.     marginTop: marginMap[size.value] || marginMap.default,
  57.   }
  58. })
  59. </script>
  61. <style scoped>
  62. .el-descriptions {
  63.   margin-top: 20px;
  64. }
  65. </style>

自定义样式

Descriptions 描述列表 - 图4

  1. <template>
  2.   <el-descriptions title="Customized style list" :column="3" border>
  3.     <el-descriptions-item
  4.       label="Username"
  5.       label-align="right"
  6.       align="center"
  7.       label-class-name="my-label"
  8.       class-name="my-content"
  9.       width="150px"
  10.       >kooriookami</el-descriptions-item
  11.     >
  12.     <el-descriptions-item label="Telephone" label-align="right" align="center"
  13.       >18100000000</el-descriptions-item
  14.     >
  15.     <el-descriptions-item label="Place" label-align="right" align="center"
  16.       >Suzhou</el-descriptions-item
  17.     >
  18.     <el-descriptions-item label="Remarks" label-align="right" align="center">
  19.       <el-tag size="small">School</el-tag>
  20.     </el-descriptions-item>
  21.     <el-descriptions-item label="Address" label-align="right" align="center"
  22.       >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
  23.       Province</el-descriptions-item
  24.     >
  25.   </el-descriptions>
  26. </template>
  27. <style scoped>
  28. .my-label {
  29.   background: var(--el-color-success-light-9);
  30. }
  31. .my-content {
  32.   background: var(--el-color-danger-light-9);
  33. }
  34. </style>

Descriptions 属性

属性说明类型可选值默认值
border是否带有边框boolean—false
column一行 Descriptions Item 的数量number—3
direction排列的方向stringvertical / horizontalhorizontal
size列表的尺寸stringlarge / default / smalldefault
title标题文本，显示在左上方string——
extra操作区文本，显示在右上方string——

Descriptions 插槽

插槽名说明子标签
—自定义默认内容Descriptions Item
title自定义标题，显示在左上方—
extra自定义操作区，显示在右上方—

Descriptions Item 属性

属性说明类型可选值默认值
label标签文本string——
span列的数量number—1
width列的宽度，不同行相同列的宽度按最大值设定（如无 border ，宽度包含标签与内容）string / number——
min-width列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列（如无 border，宽度包含标签与内容）string / number——
align列的内容对齐方式（如无 border，对标签和内容均生效）stringleft / center / rightleft
label-align列的标签对齐方式，若不设置该项，则使用内容的对齐方式（如无 border，请使用 align 参数）stringleft / center / right—
class-name列的内容自定义类名string——
label-class-namecolumn label custom class namestring——

Descriptions Item 插槽

插槽名说明
—自定义默认内容
label自定义标签

源代码

组件 Descriptions 描述列表 - 图5 • 文档 Descriptions 描述列表 - 图6

贡献者

Descriptions 描述列表 - 图7 云游君

Descriptions 描述列表 - 图8 三咲智子

Descriptions 描述列表 - 图9 jeremywu

Descriptions 描述列表 - 图10 kooriookami

Descriptions 描述列表 - 图11 Aex

Descriptions 描述列表 - 图12 류한경

Descriptions 描述列表 - 图13 Delyan Haralanov

Descriptions 描述列表 - 图14 btea

Descriptions 描述列表 - 图15 Herrington Darkholme

Descriptions 描述列表 - 图16 C.Y.Kun

Descriptions 描述列表 - 图17 qiang