Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，导致关闭 dialog 时浏览器卡死问题

最新推荐文章于 2025-09-01 16:19:15 发布

剑吾意

最新推荐文章于 2025-09-01 16:19:15 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/PeRo_AG/article/details/119993167

在Vue2项目中遇到一个问题，即使用Element UI的dialog组件内嵌套tabs时，关闭dialog会导致浏览器卡死。解决这个问题的方法是在tabs上添加v-if，将其绑定到dialog的visible.sync属性，确保当dialog关闭时，tabs也会随之销毁，避免资源泄漏。通过这种方式，可以有效地防止浏览器卡死现象的发生。

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

Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，导致关闭 dialog 时浏览器卡死问题

解决办法：

给 tab 添加 v-if ，绑定 dialog 的 visible.sync

<el-dialog :visible.sync="linkSelecterShow">
 <el-tabs v-model="activeName" :visible.sync="linkSelecterShow">
   <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
   <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
   <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
   <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
 </el-tabs>
</el-dialog>