ElementUI嵌套Form的Dialog如何重置Form

yipeng

场景

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

选中第一行
clipboard.png
先点击添加按钮,执行resetFields(),重置form,正常。
clipboard.png
再点击修改按钮,回显用户信息,正常。
clipboard.png

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

选中第一行
clipboard.png
先点击修改按钮,回显用户信息,正常。
clipboard.png
再点击添加按钮,执行resetFields(),没有重置form,异常
clipboard.png

分析

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

clipboard.png

<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 方法清空表单中的坑
阅读 4.8k
1 声望
0 粉丝
0 条评论
1 声望
0 粉丝
文章目录
宣传栏