ElementUI嵌套Form的Dialog如何重置Form

场景

第一次打开页面时，先点添加按钮

选中第一行

先点击添加按钮，执行 resetFields()，重置 form，正常。

再点击修改按钮，回显用户信息，正常。

第一次打开页面时，先点修改按钮

选中第一行

先点击修改按钮，回显用户信息，正常。

再点击添加按钮，执行 resetFields()，没有重置 form， 异常。

分析

官方文档的描述是重置为初始值。在创建 form 对象时，使用 model 绑定的 表单数据对象 ，在 form 对象的mounted 时期记录了下来第一次使用的 表单数据对象 ，这个表单数据对象就是 初始值 ，每次调用resetFields() 重置表单，都是使用这个 初始值，所以重置并不是清空。

<el-form ref="form" :model="form" label-width="80px">
... ...
</el-form>

解决

先调用 resetFields() 重置表单并移除校验结果，然后将 表单数据对象 置空。

resetEntityForm: function () {this.$nextTick(function () {this.$refs.entityForm.resetFields();
        for (var key in this.entity) {if (this.entity.hasOwnProperty(key)) {this.entity[key] = '';
            }
        }
    });
}

参考：
解决 ElementUI form 表单在 dialog 中重置表单，无法正确重置的问题
elementui- 清除弹框中表单的默认值 -resetFields()
element-ui 表单清空 resetFields 方法清空表单中的坑