现象
页面有个新增和编辑共用的弹出框,在页面初始化后先点新增,后编辑,正常。
先编辑,后新增使用resetFields表单数据竟然没有清空。
原因
在没有点新增或着编辑时,我的el-dialog弹出框里的内容是空白的,只有header和footer,
并没有body,只有el-dialog弹出时才会加载内容。
接着我们看element-ui的文档
resetFields该方法是把表单的数据重置为初始值。并不是清空,因此可以想到:
当我们先新增在编辑,初始值是空的,调用resetFields()方法自然正常。
当我们先编辑在新增,会对表单赋值,初始值就是我们赋的值,调用resetFields()方法,表单里还有之前赋的值,并不是我们希望得到的清空表单。
解决
在编辑时,弹出框我们先让他初始化结束再赋值。
edit(row) {
this.visible = true;
this.$nextTick(()=> {
// 赋值
})
},