element UI => element Plus 差异化整理

ops/2025/3/4 11:52:25/

注:文章由deepSeek生成;

以下是 Element UI 和 Element Plus 中 有变化的组件属性差异 的详细对比。这些变化主要集中在 Vue 3 的适配、API 优化以及新特性的引入。


1. Button 组件 (el-button)

属性名Element UIElement Plus差异说明
iconicon="el-icon-xxx":icon="IconName"Element Plus 使用 Vue 3 的组件化图标,需引入图标组件(如 Search)。

2. Input 组件 (el-input)

属性名Element UIElement Plus差异说明
prefix-iconprefix-icon="el-icon-xxx":prefix-icon="IconName"Element Plus 使用组件化图标。
suffix-iconsuffix-icon="el-icon-xxx":suffix-icon="IconName"Element Plus 使用组件化图标。

3. Dialog 组件 (el-dialog)

属性名Element UIElement Plus差异说明
visible:visible.sync="dialogVisible"v-model:visible="dialogVisible"Element Plus 使用 v-model 语法,替代 .sync 修饰符。

4. Form 组件 (el-form)

属性名Element UIElement Plus差异说明
validate-on-rule-change:validate-on-rule-change="true"已移除Element Plus 移除了该属性,规则变化时会自动重新验证。

5. Table 组件 (el-table)

属性名Element UIElement Plus差异说明
row-class-name:row-class-name="rowClassName":row-class="rowClassName"Element Plus 将 row-class-name 改为 row-class

6. MessageBox 组件 (el-message-box)

属性名Element UIElement Plus差异说明
callbackcallback 函数已移除Element Plus 使用 Promise 替代 callback,推荐使用 then/catch

7. Notification 组件 (el-notification)

属性名Element UIElement Plus差异说明
offsetoffsetElement Plus 新增 offset 属性,用于设置通知的偏移量。

8. Tree 组件 (el-tree)

属性名Element UIElement Plus差异说明
check-strictly:check-strictly="true":check-strictly="true"Element Plus 中 check-strictly 的行为更严格,父子节点选中状态不再关联。

9. Upload 组件 (el-upload)

属性名Element UIElement Plus差异说明
on-previewon-previewon-previewElement Plus 中 on-preview 的参数调整为更符合 Vue 3 的事件模型。
on-removeon-removeon-removeElement Plus 中 on-remove 的参数调整为更符合 Vue 3 的事件模型。

10. Icon 组件 (el-icon)

属性名Element UIElement Plus差异说明
图标使用方式<i class="el-icon-xxx"></i><el-icon><IconName /></el-icon>Element Plus 使用组件化图标,需引入图标组件(如 Search)。

11. Pagination 组件 (el-pagination)

属性名Element UIElement Plus差异说明
prev-textprev-text="上一页"已移除Element Plus 移除了 prev-text 和 next-text,改用插槽自定义。
next-textnext-text="下一页"已移除Element Plus 移除了 prev-text 和 next-text,改用插槽自定义。

12. DatePicker 组件 (el-date-picker)

属性名Element UIElement Plus差异说明
value-formatvalue-format="yyyy-MM-dd"value-format="YYYY-MM-DD"Element Plus 使用 dayjs 替代 moment,格式字符串有所调整。

13. TimePicker 组件 (el-time-picker)

属性名Element UIElement Plus差异说明
value-formatvalue-format="HH:mm:ss"value-format="HH:mm:ss"Element Plus 使用 dayjs 替代 moment,格式字符串有所调整。

14. Cascader 组件 (el-cascader)

属性名Element UIElement Plus差异说明
props:props="{ label: 'name', value: 'id' }":props="{ label: 'name', value: 'id' }"Element Plus 中 props 的行为更严格,需确保数据结构一致。

总结

  • Element Plus 在 Vue 3 的基础上对部分组件的 API 进行了优化和调整,主要体现在:

    • 图标使用方式:从类名改为组件化图标。

    • 双向绑定:从 .sync 改为 v-model

    • 移除或调整部分属性:如 validate-on-rule-changeprev-text 等。

    • 事件参数调整:更符合 Vue 3 的事件模型。

如果需要更详细的差异,可以参考 Element Plus 官方文档 和 Element UI 官方文档。


http://www.ppmy.cn/ops/163034.html

相关文章

跟据spring boot版本,查看对应的tomcat,并查看可支持的tomcat的版本范围

一 查看springboot自带的tomcat版本&#xff1a; 可直接在项目中找到Maven Dependencies中找到tomcat版本 二、查看SpringBoot内置tomcat版本的支持范围 我这边是跟据maven仓库查看的 首先跟据链接打开maven仓库&#xff1a;https://mvnrepository.com/ 然后搜索&#xff1a…

使用DeepSeek+KIMI生成高质量PPT

一、使用DeepSeek DeepSeek官网&#xff1a;DeepSeek 点击“开始对话”&#xff0c;进入交互页面。 在上图中&#xff0c;输入问题&#xff0c;即可获取AI生成的结果。 基础模型&#xff08;V3&#xff09;&#xff1a;通用模型&#xff08;2024.12&#xff09;&#xff0c;高…

本地部署 DeepSeek:从 Ollama 配置到 Spring Boot 集成

前言 随着人工智能技术的迅猛发展&#xff0c;越来越多的开发者希望在本地环境中部署和调用 AI 模型&#xff0c;以满足特定的业务需求。本文将详细介绍如何在本地环境中使用 Ollama 配置 DeepSeek 模型&#xff0c;并在 IntelliJ IDEA 中创建一个 Spring Boot 项目来调用该模型…

8295智能座舱弹窗点击问题,点击window之外的区域,window不消失的问题。touchableRegion的问题分析(android 13)

1.问题描述 在项目开发过程中&#xff0c;遇到input的问题。用户点击status bar的Wifi图标之后&#xff0c;会弹出wifi列表的window&#xff0c;而点击这个window之外的区域&#xff0c;wifi列表的窗口不会消失的问题。 2. 问题分析定位 分析触摸问题&#xff0c;必不可少的会…

攻防世界WEB(新手模式)18-easyphp

打开题目&#xff0c;直接开始代码审计 条件1&#xff1a;$a 必须存在&#xff0c;且 intval($a) 必须大于 6000000&#xff0c;同时 strlen($a) 必须小于等于 3。 这意味着 $a 必须是一个字符串&#xff0c;且它的整数值大于 6000000&#xff0c;但字符串长度不能超过 3。这看…

JS宏进阶:数据分类之逻辑回归

一、逻辑回归介绍 逻辑回归(Logistic Regression)是一种用于解决分类问题的统计学习方法,特别是适用于二分类问题。 1、原理 线性模型与逻辑函数:逻辑回归基于线性回归的概念,但通过使用逻辑函数(也称为 sigmoid 函数)将线性模型的输出映射到 [0, 1] 的概率范围内。这…

机器学习:特征提取

介绍 &#xff08;一&#xff09;原理 特征提取的核心概念是将高维、复杂的原始数据转换为低维且具有代表性的特征集合。原始数据往往包含大量冗余或无关信息&#xff0c;直接使用这些数据进行模型训练不仅会增加计算成本&#xff0c;还可能导致模型性能下降。通过特征提取&a…

一文了解:部署 Deepseek 各版本的硬件要求

很多朋友在咨询关于 DeepSeek 模型部署所需硬件资源的需求&#xff0c;最近自己实践了一部分&#xff0c;部分信息是通过各渠道收集整理&#xff0c;so 仅供参考。 言归正转&#xff0c;大家都知道&#xff0c;DeepSeek 模型的性能在很大程度上取决于它运行的硬件。我们先看一下…