编辑-对话框关闭 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之后再进行赋值操作这样就可以完美解决问题了:

相关推荐
Sacrifice33922 天前
ElementUI Form 组件 `resetFields` 方法失效排查手册
element
面向对象面向君23 天前
骨架屏不结束🏃🏻,CPU哪敢躺平🚨
css·element
hemoo24 天前
Element UI 日期区间定制
vue.js·element
晚风30824 天前
el-tab组件与echarts的影响
echarts·element
抹茶san25 天前
el-tabs频繁切换tab引发的数据渲染混淆
前端·vue.js·element
柚子a1 个月前
element-plus el-upload 因默认自动上传导致的一系列问题
vue.js·element
学吧别真挂了1 个月前
Vue 3三大UI组件库全解析:从安装到实战
element·ant design·vant
slmev1 个月前
Element UI 弹窗中 el-select 下拉框位置错乱的解决方案
element
Json_1 个月前
vue2 + element-ui 开发网站拼图小游戏-前端项目
前端·vue.js·element
sen_shan1 个月前
Vue3+Vite+TypeScript+Element Plus开发-10.多用户动态加载菜单
vue.js·typescript·vue3·element·element plus·动态菜单·多用户动态加载菜单