【治病之旅】Element-UI的resetFields()方法不生效的原因及解决方法

问题描述：

先调用编辑回显再调用新增this.$ref['form'].resetFields()无法重置表单项,又不想一个字段一个字段reset

原因：

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

element-ui的官方文档：

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

解决：

在设置回显值的时候，不要直接赋值，在外边加上setTimeout或者this.$nextTick 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'] 中名称一致

<el-form ref="form"></el-form>

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

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

<el-form-item label="定时发送间隔" prop="msstp_sendgap" :show-message="msstp_sendtypeIs0">
	<el-input v-model="packForm.msstp_sendgap" clearable></el-input>
</el-form-item>

转载自CSDN element-ui的resetFields()方法不生效的原因及解决方法，侵删