el-descriptions详解

el-descriptions 是 Element Plus 框架中的描述列表组件，用于展示一组键值对的数据。它常用于详情展示、表单查看等场景。

el-descriptions 属性详解

1. column:

   • 类型: Number | Object
   • 用途: 列数或响应式列数配置。
   • 默认值: 3

2. border:

   • 类型: Boolean
   • 用途: 是否显示边框。
   • 默认值: false

3. colon:

   • 类型: Boolean
   • 用途: 是否显示冒号。
   • 默认值: true

4. size:

   • 类型: String
   • 用途: 尺寸，可选值为 medium、small、mini。
   • 默认值: medium

5. direction:

   • 类型: String
   • 用途: 布局方向，可选值为 horizontal、vertical。
   • 默认值: horizontal

el-descriptions 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义描述列表的内容。

2. extra:

   • 插槽名称: extra
   • 用途: 自定义额外信息的内容。

el-descriptions-item 子组件

el-descriptions-item 是 el-descriptions 的子组件，用于定义具体的描述项。

el-descriptions-item 属性详解

1. label:

   • 类型: String
   • 用途: 描述项的标签。
   • 默认值: —

2. label-style:

   • 类型: Object
   • 用途: 描述项标签的样式。
   • 默认值: —

3. label-class-name:

   • 类型: String
   • 用途: 描述项标签的类名。
   • 默认值: —

4. content-style:

   • 类型: Object
   • 用途: 描述项内容的样式。
   • 默认值: —

5. content-class-name:

   • 类型: String
   • 用途: 描述项内容的类名。
   • 默认值: —

完整示例代码

<template>
  <div>
    <h2>Descriptions 示例</h2>

    <!-- 基本用法 -->
    <el-descriptions title="用户信息" :column="3" border>
      <el-descriptions-item label="用户名">张三</el-descriptions-item>
      <el-descriptions-item label="手机号">13000000000</el-descriptions-item>
      <el-descriptions-item label="居住地">北京市</el-descriptions-item>
      <el-descriptions-item label="备注">无</el-descriptions-item>
      <el-descriptions-item label="关联账户">
        <el-tag size="small">账户1</el-tag>
        <el-tag size="small">账户2</el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 不显示冒号 -->
    <el-descriptions title="用户信息" :column="3" border :colon="false">
      <el-descriptions-item label="用户名">张三</el-descriptions-item>
      <el-descriptions-item label="手机号">13000000000</el-descriptions-item>
      <el-descriptions-item label="居住地">北京市</el-descriptions-item>
    </el-descriptions>

    <!-- 垂直布局 -->
    <el-descriptions title="用户信息" direction="vertical" :column="1" border>
      <el-descriptions-item label="用户名">张三</el-descriptions-item>
      <el-descriptions-item label="手机号">13000000000</el-descriptions-item>
      <el-descriptions-item label="居住地">北京市</el-descriptions-item>
    </el-descriptions>

    <!-- 自定义样式 -->
    <el-descriptions title="用户信息" :column="3" border>
      <el-descriptions-item label="用户名" label-style="color: blue;" content-style="color: green;">张三</el-descriptions-item>
      <el-descriptions-item label="手机号" label-class-name="custom-label" content-class-name="custom-content">13000000000</el-descriptions-item>
      <el-descriptions-item label="居住地">北京市</el-descriptions-item>
    </el-descriptions>

    <!-- 自定义额外信息 -->
    <el-descriptions title="用户信息" :column="3" border>
      <template #extra>
        <el-button type="primary" size="small">编辑</el-button>
      </template>
      <el-descriptions-item label="用户名">张三</el-descriptions-item>
      <el-descriptions-item label="手机号">13000000000</el-descriptions-item>
      <el-descriptions-item label="居住地">北京市</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 示例数据
const username = ref('张三')
const phone = ref('13000000000')
const address = ref('北京市')
</script>

代码解释

1. 基本用法:

   • 使用 el-descriptions 组件并设置 title、column 和 border 属性，使用 el-descriptions-item 子组件定义具体的描述项。

   • <el-descriptions title="用户信息" :column="3" border>
       <el-descriptions-item label="用户名">张三</el-descriptions-item>
       <el-descriptions-item label="手机号">13000000000</el-descriptions-item>
       <el-descriptions-item label="居住地">北京市</el-descriptions-item>
       <el-descriptions-item label="备注">无</el-descriptions-item>
       <el-descriptions-item label="关联账户">
         <el-tag size="small">账户1</el-tag>
         <el-tag size="small">账户2</el-tag>
       </el-descriptions-item>
     </el-descriptions>
     

2. 不显示冒号:

   • 使用 colon 属性设置是否显示冒号。

   • <el-descriptions title="用户信息" :column="3" border :colon="false">
       <el-descriptions-item label="用户名">张三</el-descriptions-item>
       <el-descriptions-item label="手机号">13000000000</el-descriptions-item>
       <el-descriptions-item label="居住地">北京市</el-descriptions-item>
     </el-descriptions>
     

3. 垂直布局:

   • 使用 direction 属性设置布局方向为垂直。

   • <el-descriptions title="用户信息" direction="vertical" :column="1" border>
       <el-descriptions-item label="用户名">张三</el-descriptions-item>
       <el-descriptions-item label="手机号">13000000000</el-descriptions-item>
       <el-descriptions-item label="居住地">北京市</el-descriptions-item>
     </el-descriptions>
     

4. 自定义样式:

   • 使用 label-style、content-style、label-class-name 和 content-class-name 属性自定义描述项的样式。

   • <el-descriptions title="用户信息" :column="3" border>
       <el-descriptions-item label="用户名" label-style="color: blue;" content-style="color: green;">张三</el-descriptions-item>
       <el-descriptions-item label="手机号" label-class-name="custom-label" content-class-name="custom-content">13000000000</el-descriptions-item>
       <el-descriptions-item label="居住地">北京市</el-descriptions-item>
     </el-descriptions>
     

5. 自定义额外信息:

   • 使用 extra 插槽自定义额外信息的内容。

   • <el-descriptions title="用户信息" :column="3" border>
       <template #extra>
         <el-button type="primary" size="small">编辑</el-button>
       </template>
       <el-descriptions-item label="用户名">张三</el-descriptions-item>
       <el-descriptions-item label="手机号">13000000000</el-descriptions-item>
       <el-descriptions-item label="居住地">北京市</el-descriptions-item>
     </el-descriptions>