Element Plus组件

文章目录

• • [el-descriptions 和 el-descriptions-item](#el-descriptions 和 el-descriptions-item)
  • • [1. `el-descriptions`（容器组件）](#1. el-descriptions（容器组件）)
    • • 常用属性：
    • [2. `el-descriptions-item`（子项组件）](#2. el-descriptions-item（子项组件）)
    • • 常用属性：
    • 基本用法示例
    • • 效果说明：
    • 结合响应式数据使用
    • 纵向排列（`direction="vertical"`）
    • 总结

Element Plus组件总览

el-descriptions 和 el-descriptions-item

el-descriptions 和 el-descriptions-item 是 Element Plus 中用于展示"键值对"形式信息的组件（类似详情页的属性说明），常用于展示对象的多个属性，比如用户信息、数据详情等。下面详细介绍它们的用法和常用属性：

1. el-descriptions（容器组件）

作为描述列表的外层容器，用于控制整体布局（列数、对齐方式、边框等），内部嵌套 el-descriptions-item 作为每一项。

常用属性：

属性名	说明	类型	默认值
column	每行展示的列数（屏幕尺寸变化时可通过 responsive 自适应）	number	3
border	是否显示边框（带边框的列表更像表格样式）	boolean	false
direction	排列方向（horizontal 横向 / vertical 纵向）	string	'horizontal'
align	内容对齐方式（left / center / right，作用于所有项）	string	'left'
label-align	标签的对齐方式（优先级高于 align，仅控制 label 部分）	string	'right'
responsive	是否响应式布局（屏幕变小时自动调整列数）	boolean	true

2. el-descriptions-item（子项组件）

作为描述列表的每一项，用于展示单个"键值对"（label 为键，内部内容为值）。

常用属性：

属性名	说明	类型	默认值
label	左侧的标签文本（键名）	string	---
span	该项占多少列（默认占 1 列，可跨列，类似表格的 colspan）	number	1
align	该项内容的对齐方式（覆盖容器的 align）	string	---
label-align	该项标签的对齐方式（覆盖容器的 label-align）	string	---

基本用法示例

<template>
  <!-- 带边框的描述列表，每行3列 -->
  <el-descriptions 
    column="3" 
    border 
    label-align="center"
  >
    <!-- 每一项：label 是键，内部是值 -->
    <el-descriptions-item label="姓名">张三</el-descriptions-item>
    <el-descriptions-item label="年龄">25</el-descriptions-item>
    <el-descriptions-item label="性别">男</el-descriptions-item>
    <!-- 跨列示例：该项占2列 -->
    <el-descriptions-item label="地址" span="2">北京市朝阳区</el-descriptions-item>
    <el-descriptions-item label="职业">工程师</el-descriptions-item>
  </el-descriptions>
</template>

效果说明：

• 整体显示 3 列，带边框，标签居中对齐。
• "地址"项通过 span="2" 跨 2 列，所以一行中"地址"会占据两列位置，后面紧跟"职业"项。

结合响应式数据使用

通常会配合 Vue 的响应式数据动态展示内容，比如你的示例中使用 {``{ overview.xxx }} 绑定数据：

<template>
  <el-descriptions :column="3" border>
    <!-- 动态绑定数据 -->
    <el-descriptions-item label="裂缝总数">{{ overview.totalCracks }}</el-descriptions-item>
    <el-descriptions-item label="高速公路">{{ overview.highwayName }}</el-descriptions-item>
    <el-descriptions-item label="检测时间">{{ overview.detectionDate }}</el-descriptions-item>
  </el-descriptions>
</template>

<script setup>
import { reactive } from 'vue'

// 响应式数据
const overview = reactive({
  totalCracks: 120,
  highwayName: '京藏高速',
  detectionDate: '2023-10-01'
})
</script>

当 overview 中的数据变化时，描述列表会自动更新展示内容。

纵向排列（direction="vertical"）

适合移动端或需要垂直展示的场景：

<el-descriptions direction="vertical" column="1">
  <el-descriptions-item label="姓名">张三</el-descriptions-item>
  <el-descriptions-item label="年龄">25</el-descriptions-item>
</el-descriptions>

效果：标签和值上下排列（标签在上，值在下），每行占 1 列。

总结

• el-descriptions 是容器，负责整体布局（列数、边框、对齐等）。
• el-descriptions-item 是子项，负责单个键值对的展示，可通过 span 跨列。
• 常用于详情页、数据概览等需要清晰展示多个属性的场景，配合响应式数据可实现动态更新。