ElementUI嵌套Form的Dialog如何重置Form

场景

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

选中第一行

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

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

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

选中第一行

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

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

分析

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


... ...

解决

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

你可能感兴趣的:(dialog,form,element-ui)