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

相关推荐
Bigger1 天前
这个需求妹子不会!哎,又要帮妹子做需求了......
前端·vue.js·element
那你能帮帮我吗3 天前
element-ui的el-color-picker颜色选择器组件,弹窗定位在左上角的问题排查和解决
前端·element
GDAL1 个月前
element-plus教程:Input Number 数字输入框
element
GDAL1 个月前
element-plus教程:Input 输入框
element
GDAL1 个月前
element-plus教程:Layout 布局
element
努力挣钱的小鑫1 个月前
【Element】vue2 el-table scope.row 更改数据,试图没有更新
前端·javascript·vue.js·element
上海_彭彭1 个月前
【提效工具开发】Python功能模块执行和 SQL 执行 需求整理
开发语言·python·sql·测试工具·element
October_CanYang2 个月前
elementUI中el-tree 展开收起(折叠)和 父节点半选状态初始化回显并传给接口
前端·vue.js·element
我看刑2 个月前
el-datepicker禁用未来日期(包含时分秒)type=‘datetime’
前端·vue·element
October_CanYang2 个月前
vue+ElementUI实现下拉分级菜单:el-select嵌套el-tree树形控件实现下拉树效果(附带模糊查询搜索功能)
vue.js·element