element-ui的resetFields()方法不生效的原因及解决方法

问题描述：

先调用编辑回显再调用新增 this.$ref['form'] .resetFields()无法重置表单项

原因：

调用编辑的时候，表单的初始值被设置为回显的值，每次重置时只是重置为初始值，不是空值。

element-ui的官方文档：

当我们第一次打开Dialog，紧接着设置回显，因为Dialog还没执行完毕，这时form的初始值会被设置为回显的值，所以在调用this.$ref['form'] .resetFields()时form看起来没有重置。

解决：

在设置回显值的时候，不要直接赋值，在外边加上setTimeout或者this.$nextTick

eidt: function () {              
    this.adddialog = true;
    //回显数据
    this.$nextTick(function(){
        this.form = data;
    })
}

或

eidt: function () {              
    this.adddialog = true;
    //回显数据
    setTimeout(function(){
        this.form = data;
    }.bind(this), 0);
}

 

其他原因：

1.表单上没有添加ref属性

解决：在form上添加ref，需要与this.$ref['form'] 中名称一致

2.el-form-item没有添加prop属性

解决：prop属性需要与data绑定的属性一致

 

能帮到你的话，请右上角点个赞哦~