开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第20 天，点击查看活动详情

前言

工作中碰到了一个需求需要在el-dialog中嵌套el-tabs，代码写完打开页面，点开对话框，看下效果不错，正准备下一步想关闭对话框，点了一下发现页面卡死了，后面搜索一番才发现用法不对。

原因与方法

我们在element-ui的Issues搜索卡死问题，会发现有人提到了，判定为不是bug已经被关闭，这就是为什么说用法不太对。 QQ图片20230222225019.png 后面有搜索了下，主要原因是el-dialog中destroy-on-close参数与el-tab-pane中的内容产生了内循环，导致了浏览器卡死，页面崩溃。
destroy-on-close:默认值为false，用于设置对话框关闭时是否销毁其中的元素，当设置为true时会导致该问题。
el-tab-pane:用来放置el-tabs标签页的内容。知道了导致的原因，那么我们就可以“对症下药”：

将destroy-on-close设置为false解决，不去销毁元素。我们在源码中可以看到该参数的用法：从图上可以清晰看到销毁，就是利用key标识初始化组件内容。
将el-tab-pane内容封装成一个组件解决。如果我们把el-tab-pane中内容去掉，即使destroy-on-closes设置为ture也没问题，按照这个思路，我们把内容封装成组件，销毁时内容组件自身销毁，再去销毁el-tabs就没问题啦，就像如下写法：

   <el-dialog title="对话框" visible destroy-on-close>
    <el-tabs v-model="activeName">
      <el-tab-pane>
        <A />
      </el-tab-pane>
      <el-tab-pane>
        <B />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>

到此我们需求问题就能解决了，我们回过头去再看下提出的卡死问题，发现还有el-tabs卡死问题:
只用el-col包裹el-tabs，不用el-row也会造成卡死，所以使用el-tabs时还是要规范一些。

总结

以上就是嵌套问题产生原因与解决方法，如碰到类似问题可以一试。

填坑小能手——el-dialog嵌套el-tabs问题

前言

原因与方法

总结