开发过程中出现了resetFields表单无法重置的问题
问题:
因为新增和编辑的字段是一样的,所以把他们放在一个弹框表单中了。、
重现:
进入列表页面后,先点击编辑按钮,然后点击新增按钮,显示的弹出框显示刚才编辑的内容。
弹出框的close方法是调用了resetFields方法的,但是没有生效。
resetFields不生效的原因:
此方法是将form表单的数据设置为初始值,而这个初始值是在form mouted生命周期被赋值上去的。所以,在form mounted之前,如果form表单赋值了,那么后面调用resetFields都是无效的,因为form表单的初始值已经在mounted之前就被赋值了。
解决办法:
只要在form表单mounted之后再进行赋值操作这样就可以完美解决问题了,也就是说在点击编辑赋值的时候使用this.$nextTick方法
修改前:
onIsShow(newVal: boolean) {
this.visible = newVal;
if (this.showType === 'edit') {
this.form = this.modifyForm;
this.dialogTitle = '编辑';
} else if (this.showType === 'add') {
this.dialogTitle = '新增';
}
}
修改后:
onIsShow(newVal: boolean) {
this.visible = newVal;
if (this.showType === 'edit') {
this.$nextTick(() => {
this.form = this.modifyForm;
});
this.dialogTitle = '编辑';
} else if (this.showType === 'add') {
this.dialogTitle = '新增';
}
}
网友评论