关于element表单重置resetFields()不生效问题

问题描述

使用element对话框Dialog，添加编辑使用一个弹出框时，发现使用表单重置方法resetFields()不生效，也就是点击编辑之后关闭弹框，再点击添加，此时弹出框表单仍然保留编辑项的内容而不是全新的空表单。

弹框的@close='resetForm'关闭事件绑定了重置表单以及表单验证的方法

resetForm(){
      //重置表单
      this.$refs.form.resetFields();
      //重置表单验证
      this.$refs.form.clearValidate();
},

再三检查表单绑定:model="form",ref="form"，item绑定的prop="name"，以及输入框绑定的v-model="form.name"都是没有问题的，

在这种情况下，resetFields()方法依然不生效

产生原因（此处转载大佬文章，正在努力研究中）

1.此方法用于将form表单的数据设置为初始值
2.而这个初始值是在form mounted生命周期被赋值上去的
3.所以，在 form mounted之前，如果给form表单赋值了，那么后面调用resetFields()都是无效的，因为form表单的初始值已经在 mounted 之前就被赋值了

解决办法

在点击编辑赋值的时候使用 this.$nextTick(function(){})方法，即可以实现在 mounted 之后再进行赋值操作，此时resetFields()就起作用了

修改之前代码

this.dialogFormVisible=true;
this.formTitle=`编辑「${row.name}」模块`;
form.name=row.name;
form.url=row.url;

修改之后代码

this.dialogFormVisible=true;
this.$nextTick(function(){
      this.formTitle=`编辑「${row.name}」模块`;
      form.name=row.name;
      form.url=row.url;
})