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