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 方法清空表单中的坑