项目场景:
前段时间遇到一个问题,当页面刷新之后,第一次先选择了一条数据打开了编辑弹窗,再关闭。之后再打开新增弹窗,原本应该是空的el-form表单还是刚刚打开编辑时的数据,而且我每次在关闭弹窗都会使用this.$refs[formName].resetFields()去重置el-form,所以这是什么情况造成的?
问题描述
在多次测试又发现:当第一次点击新增弹窗之后,之后的el-form表单重置都没有问题,只有第一次点击编辑才会有问题。
原因分析:
这是因为,当页面刷新后,我们第一次打开编辑弹窗时,el-dialog是懒加载的,这一行的数据对el-form进行了赋值,之后el-dialog才被渲染完成,里面的el-form才完成初始化,所以这个el-form表单使用this.$refs[formName].resetFields()进行初始化时每次都会生效,只不过初始化的值是第一次的数据。
解决方案:
那么解决方法是什么?
只需要在el-dialog渲染完成之后,我们再进行赋值即可
this.visible = true
setTimeout(()=>{
this.form.name = row.name
this.form.sex = row.sex
},100)