vue+elementui 表单resetFields()重置无效

一般表单重置无效有以下三种情况

1. 表单加ref属性
   

2. 需要重置的表单项el-form-item必须要加上prop属性，并且prop属性的值必须和数据双向绑定的值最后面保持一致，如
   

3. elementUI表单先编辑后新增resetFields()无效

   问题描述：

   • 页面有个新增和编辑共用的弹出框表单，在页面初始化后先点新增，后编辑，正常。
   • 先编辑，后新增使用resetFields()表单数据竟然没有清空。

   解决：

   在编辑时，弹出框我们先让他初始化结束再赋值，使用$nextTick再执行赋值。

edit(row) {
    this.visible = true;
    this.$nextTick(()=>{
        //赋值
        this.editForm = {...row};
    })
},

原因：

1. 当我们先新增再编辑，初始值是空的，调用resetFields()方法自然正常。
2. 当我们先编辑再新增，会对表单赋值，初始值就是我们赋的值，调用resetFields()方法，表单里还有之前赋的值，并不是我们希望得到的清空表单。