Element ui 重置表单resetField（）方法不生效

 Element ui在重置表单时需要特别注意

非弹窗情况下

1.指定表单的ref是否正确 

<el-form :model="form"  ref="ruleForm" >

</el-form>

2.确定重置的表单的<el-form-item></el-form-item>是否设置了prop属性（多数是因为忽略了这一步）

例如：我们需要清空当前的登陆表单

//页面部分
<el-form :model="ruleForm"  :rules="rules" ref="ruleForm" >
 <el-form-item label="用户名：" prop="userName">
 </el-form-item> 
 <el-form-item>   
    <el-button @click="resetForm('ruleForm')">重置</el-button>
 </el-form-item>
</el-form>


//事件部分
 resetForm(formName)
 {
   this.$refs[formName].resetFields();      
 }

弹窗情况下

场景：比如我们需要做一个新增和修改的弹窗，相信各位前端大佬们肯定会把这个弹窗抽出做成一个公共组件，再去写对应功能的时候就会方便许多，但是当我们做成公共组件后，点击编辑，好的没问题，点击新增，诶这个内容是什么情况，这不是上次点击的出现的数据吗？

喔 天哪，新增的表单里怎么也被提交了，相信大家与遇见这个问题以后肯定会想，在新增的时候给他清空表单就完美解决了，但是当我们去调用resetFields（）方法的时候会发现没有作用，检测了一下代码跟上面没用弹窗的时候一样的啊，为什么没有生效呢？

原因如下：

1.resetFields方法是将form表单的数据设置为初始值但是这个初始值是在form的 mounted生命周期

被赋值上去的的resetFields方法才会有效，这里继续我们对于VUE的生命周期钩子有一定的了解

 他们在这个时候会将表单的数据进行赋值，所以在mounted周期之前赋值的resetFields方法将会无效

这时我们可以在mounted周期之后使用this.$nextTick （（）=>{进行表单赋值}）将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。

实例代码：

showLogin(data) 
{
  if (data.type == "add") {
    this.logTitle = "添加";
  } else if (data.type === "update") {
    this.logTitle = "编辑";
    //赋值的时候在这里将回调延迟到下次DOM更新循环之后执行
    this.$nextTick(() => {
      this.form.name = data.name;
      this.form.age = data.age;
    });
  }
},

这样一系列操作以后我们再去调用表单的重置表单就会生效啦

//重置表单的方法，接收参数为表单的ref指向
resetForm(formName)
 {
   this.$refs[formName].resetFields();
 }