注:文章由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 官方文档 和 Element UI 官方文档。