element-ui 表单清空使用resetFields() 无效问题

问题描述：

        页面有新增和编辑两个功能，共用同一张表单，当我在页面初始化后先点新增，后编辑，可以重置 form，但是当我先点编辑，后新增，重置表单内容没有一点变化，使用 resetFields() 表单数据没有清空。

一开始，我给重置表单里面的方法增加了this.$nextTick(() => { });,如下：

//重置表单
reset(){
    this.$nextTick(() => {
        this.$refs['form'].resetFields();
    });
}

结果还是没有任何变化。

然后我又将resetFields改成了clearValidate，然后我发现clearValidate是生效的，于是我手动将form中的数据重置了

//重置表单
reset() {
    this.$refs.form.clearValidate();
    this.form={
        name:'',
        number: 0,
        id:'',
        remark:'',
    }
},

这样就可以解决问题啦。

但是！我还是纠结为什么resetFields会失效，在多次查找资料之后发现了错误原因：

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

解决方法：

        在编辑时，弹出框中的表单我们先让他初始化结束再赋值。

//打开表单
handleEdit(row) {
    this.formVisible = true;
    if (row) {                     //判断是编辑还是新增
        this.dialogTitle = "编辑";
        this.$nextTick(() => {     //使用 $nextTick 执行赋值
            this.form = {
                name: row.Name,
                number: row.Number,
                id: row.id,
                remark: row.Remark
            };
        });
    } else {
        this.dialogTitle = "新增";
    }
},

提示：

        当resetFields()失效时，要先确认表单中每个 form-item 都有 prop 属性，而且prop属性值和form表单中的数据一致，并且<el-form>中必须包含model和ref属性，并且:model不能写成v-model或者model，这是element 中定义的属性，不能修改。