编辑用户
在这里插入图片描述
新增用户
在这里插入图片描述
点击编辑的时候,数据回显,没问题:
在这里插入图片描述
点击取消,会调用方法
在这里插入图片描述
在这里插入图片描述
按理说应该会把表单清空。但是我们再点击新增的时候,数据并没有被清空:
在这里插入图片描述

原因:
点击编辑的时候,一旦执行showModal.value = true, 就显示dialog,然后立马就执行Object.assign(userForm, row)
此时数据修改了,但是dialog里面的el-form还没有mounted,也就是说,数据是在form表单mounted之前修改的,那么这个修改后的数据就成为了form表单的初始值
而重点是,resetFields方法是用来把表单重置到初始值的,现在初始值都修改成回显数据了,再怎么调用resetFields都是徒劳
在这里插入图片描述

解决方案:
只要在 form 表单 mounted之后再进行赋值操作这样就可以完美解决问题了。
在这里插入图片描述

参考:

  1. nextTick案例: 解决Element表单resetFields属性失效
  2. el-form resetForm()表单重置
  3. Element-UI Form表单 resetFields() 重置表单无效问题
  4. 解决Element resetFields()重置表单不生效的问题
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐