苏州建设工程信息网_网上服务办事大厅_杭州seo外包_海外seo推广公司

注：文章由deepSeek生成；

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

---

1. Button 组件 (el-button)

属性名	Element UI	Element Plus	差异说明
icon	icon="el-icon-xxx"	:icon="IconName"	Element Plus 使用 Vue 3 的组件化图标，需引入图标组件（如 Search）。

---

2. Input 组件 (el-input)

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

---

3. Dialog 组件 (el-dialog)

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

---

4. Form 组件 (el-form)

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

---

5. Table 组件 (el-table)

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

---

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

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

---

7. Notification 组件 (el-notification)

属性名	Element UI	Element Plus	差异说明
offset	无	offset	Element Plus 新增 offset 属性，用于设置通知的偏移量。

---

8. Tree 组件 (el-tree)

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

---

9. Upload 组件 (el-upload)

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

---

10. Icon 组件 (el-icon)

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

---

11. Pagination 组件 (el-pagination)

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

---

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

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

---

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

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

---

14. Cascader 组件 (el-cascader)

属性名	Element UI	Element 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-change、prev-text 等。

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

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