编辑-对话框关闭 el-form的resetFields()不生效的原因

编辑-对话框关闭 el-form的resetFields()不生效的原因

场景

在后台管理系统中,点击"操作"中的编辑,弹出 el-dialog 对话框,对列表项信息进行修改。

回显数据能够正常回显:

但是关闭后再点击新增时,数据没有被清空:

一般在关闭对话框时,都会调用 el-form的resetFields() 方法来清除表单的验证和表单项的值。

按道理来说,在编辑情况下关闭对话框后,表单的验证和表单项的值都被清空了,但当点击"新增"对话框出现时,却是表单项的值没有被清空:

原因

点击编辑的时候,执行showModal.value = true, 就显示dialog。然后立马就执行Object.assign(userForm, row)

此时数据修改了,但是dialog里面的el-form还没有mounted,也就是说,数据是在form表单mounted之前修改的,那么这个修改后的数据就成为了form表单的初始值。

而重点是,resetFields方法是用来把表单重置到初始值的,现在初始值都修改成回显数据了,再怎么调用resetFields都是徒劳

解决方案:

只要在 form 表单 mounted之后再进行赋值操作这样就可以完美解决问题了:

相关推荐
Cassie燁2 小时前
el-button源码解读3——:class="buttonKls"与颜色系统的关系
element·scss
Cassie燁3 小时前
element-plus源码解读3——【scss】颜色系统完整流程
element·scss
Lsx_5 天前
🔥Vite+ElementPlus 自动按需加载与主题定制原理全解析
前端·javascript·element
天外来物12 天前
element-plus主题配置及动态切换主题
前端·css·element
胖虎2651 个月前
Vue2 + Element UI 通用表格组件封装:高效搞定中后台数据展示
element
jason_yang1 个月前
vue3+element-plus按需自动导入-正确姿势
vue.js·vite·element
BumBle1 个月前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
练习前端两年半2 个月前
🚀 Vue3按钮组件Loading状态最佳实践:优雅的通用解决方案
前端·vue.js·element
华仔啊2 个月前
加班到凌晨,我用 Vue3 + ElementUI 写了个可编辑的表格组件
vue.js·element
Yu8752 个月前
el-select-v2 滚动选中选项之后会自动回滚到顶部
element