当点击dialog关闭按钮时，之前选择的数据仍然被保留了

最新推荐文章于 2024-01-10 11:02:30 发布

我的代码永没有bug

最新推荐文章于 2024-01-10 11:02:30 发布

阅读量2.4k

点赞数

分类专栏： element vue

本文链接：https://blog.csdn.net/weixin_48300785/article/details/118754363

版权

vue 同时被 2 个专栏收录

22 篇文章

订阅专栏

element

13 篇文章

订阅专栏

这篇博客主要讨论了一个关于用户界面交互的问题，即在点击关闭对话框时，预期的选择内容没有被清除。作者通过调试发现，在关闭弹窗时的逻辑中，未正确执行清除操作。为了解决这个问题，作者使用了`before-close`属性并定义了一个`handleDialogClose`方法来在弹窗关闭前执行清除操作，成功解决了选择内容残留的问题。这个案例对于理解和改进前端UI交互逻辑具有参考价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击dialog弹窗关闭按钮时，正常情况下，选择的内容应该取消，但实际上还是选择上了
在这里插入图片描述

问题原因：在点击关闭按钮时，没有将所选的清除，通过打断点，发现没有将数据删除，于是通过close方法，进行清除，发现选择之后保存，也进行了清除，继续打断点后发现，保存后关闭弹框也调用了close方法，最后选择before-close方法，弹框关闭前调用的方法，进行解决

解决方法

<el-dialog title="各街乡镇" :before-close="handleDialogClose" :visible.sync="dialogVisibleAddCountry" width="900px">

// 城乡镇关闭弹框前执行的回调
handleDialogClose() {
   // 处理过程
},