【治病之旅】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>
人世间,条条路坎坷
谋富贵,勇往莫退缩