当前位置：首页 > news >正文

【区分vue2和vue3下的element UI Descriptions 描述列表组件，分别详细介绍属性，事件，方法如何使用，并举例】

news 文章来源：https://blog.csdn.net/xiejunlan/article/details/139888662 2025/2/6 16:49:01

在 Element UI（为 Vue 2 设计）和 Element Plus（为 Vue 3 设计）中，Descriptions（描述列表）组件通常用于展示一系列的结构化信息。然而，需要明确的是，Element UI 官方库中并没有直接名为 Descriptions 的组件，但在 Element Plus 中，该组件是存在的。

以下将分别介绍 Element Plus 中的 Descriptions 组件（因为 Element UI 没有该组件），并解释如何在 Vue 2 中模拟实现类似的功能。

Vue 3 + Element Plus 中的 Descriptions 组件

属性 (Attributes)

title: 列表标题，可选。
border: 是否显示边框，默认为 true。
column: 列的定义，一个对象数组，每个对象包含 label（标签名）、span（列跨度）等属性。

插槽 (Slots)

default: 用于插入列表项的内容。

事件 (Events)

Element Plus 的 Descriptions 组件通常不直接触发事件，但你可以在其子组件（如 DescriptionItem）上监听事件。

方法 (Methods)

Descriptions 组件通常不直接提供方法，但你可以通过 Vue 的响应式数据来动态控制其内容。

示例

<template><el-descriptions title="用户描述" border><el-descriptions-item label="姓名">张三</el-descriptions-item><el-descriptions-item label="电话号码">13800138000</el-descriptions-item><el-descriptions-item label="居住地">上海</el-descriptions-item><el-descriptions-item label="邮箱" span="3">[zhangsan@example.com](mailto:zhangsan@example.com)</el-descriptions-item></el-descriptions>
</template><script>
import { ref } from 'vue';
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';export default {components: {ElDescriptions,ElDescriptionsItem},// ... 其他选项 ...
};
</script>

Vue 2 + Element UI 模拟 Descriptions 组件

在 Vue 2 中，你可以使用 Element UI 的其他组件（如 el-row 和 el-col）配合自定义样式来模拟 Descriptions 组件的功能。

示例

<template><div class="custom-descriptions"><div class="custom-descriptions__title">用户描述</div><el-row><el-col :span="8"><div class="custom-descriptions__item"><span class="custom-descriptions__label">姓名：</span><span class="custom-descriptions__value">张三</span></div></el-col><el-col :span="16"><div class="custom-descriptions__item"><span class="custom-descriptions__label">电话号码：</span><span class="custom-descriptions__value">13800138000</span></div></el-col></el-row><!-- 更多的行和列... --></div>
</template><script>
import { ElRow, ElCol } from 'element-ui';export default {components: {ElRow,ElCol},// ... 其他选项 ...
};
</script><style scoped>
.custom-descriptions {border: 1px solid #ebeef5;/* 其他样式... */
}.custom-descriptions__title {/* 标题样式... */
}.custom-descriptions__item {display: flex;align-items: center;/* 其他样式... */
}.custom-descriptions__label {/* 标签样式... */
}.custom-descriptions__value {/* 值样式... */
}
</style>

请注意，上述 Vue 2 的示例是一个模拟实现，并不是 Element UI 官方提供的组件。在 Vue 3 中，你可以直接使用 Element Plus 提供的 Descriptions 组件来获得更好的体验和更简洁的代码。