element UI =＞ element Plus 差异化整理

发布于：2025-03-05 ⋅ 阅读:(141) ⋅ 点赞:(0)

注：文章由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 官方文档。