前言
在项目中经常会有添加和编辑功能共用一个dialog的情况,但我们关闭了dialog后,dialog并没有被销毁,只是被隐藏,这样就会导致我们输入的数据被残留,如何解决.
方法一:早点下班(v-if)
v-if会使组件不断地销毁和重建,所以不会出现数据残留,而且还省去了后面的很多操作,但是不断地销毁和重建会影响性能,而且会在子组件重建和销毁中重复发送ajax请求.
方法二:晚点下班(ref)
在子组件上添加ref="xxx",然后在父组件中通过ref找到子组件给他下命令.
当你点击编辑按钮时,运行以下代码:
this.$nextTick(() => { // $nextTick是由于子组件刚被创建,需要等他创建完毕后再去操纵
this.$refs.deptDialog.getEmployeesSimple() // 当点击编辑按钮,要求子组件发请求更新数据(getEmployeesSimple()是你定义的获取数据回填表单的方法),因为dialog只是被隐藏,没有被销毁
})
如果你用了第二种方法,你还需要在关闭对话框时清除表单中的数据.查element官网,dialog有如下事件:
在el-dialog上面设置@close="hclose"(hclose是自己在父组件中定义的关闭事件),因为有取消按钮,所以还要使用到子向父传值,在子组件的取消按钮上设置@click="$emit('close')"
最后
希望整理的信息对您有所帮助,喜欢的话请帮忙点赞
如果有什么建议,欢迎在评论区留言
不足之处还请批评指教,谢谢!
