1. 问题描述

在使用element-ui时，如果el-dialog中嵌套了el-tabs，当关闭dialog时，页面就会被卡死。

代码如下：

<el-dialog :visible.sync="dialogVisible">
  <el-tabs v-model="tabs" type="border-card">
    <el-tab-pane name="tab1">
      tab1
    </el-tab-pane> 
    <el-tab-pane name="tab2">
      tab2
    </el-tab-pane>
  </el-tabs>
</el-dialog>

//dialog关闭前的回调
handleClose(done) {
    //TODO
    done();
}

2. 解决过程

1. 使用vue的2.6.10版本，element-ui的2.6.3版本。

首先百度了下，看看其他人有没有类似的问题，及他们的解决方案。很容易就找到了一个，但也仅仅找到了一个，就是使用vue和element的指定版本。

代码如下：

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.6.3/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>
<script src="https://unpkg.com/element-ui@2.6.3/lib/index.js"></script>

（说明：因为项目要求打包后减小vendor.js文件的大小，所以vue和element没有使用npm安装，而是在index.html中外部引入。如若使用npm，指定安装版本即可。）
刚提交代码，还没高兴几分钟，就有同事说我提交的代码，让他的样式变乱了，吓得我赶紧检查原因，还好提交的不多，马上就找到了，想了想，估计是element-ui@2.6.3和之前的版本有些冲突。因为涉及到的样式还挺多，没办法，只能另想解决方法。
如果你的项目没有样式问题，使用这个解决方法就可以。

2. 用slot title替换掉el-dialog默认自带的关闭按钮

原本以为页面卡死是dialog在关闭前执行回调handleClose()时执行了done()的原因，于是就不让dialog执行done()。

1. 给dialog标签添加:show-close="false"去掉默认自带的关闭按钮。
2. 给dialog加个自定义的title，在title里放入自己的关闭按钮，这样就可以不执行handleClose()了。

代码如下：

<el-dialog
  :visible.sync="dialogVisible"
  :show-close="false">
  <div slot="title" class="dialog-title">
    <span>标题</span>
    <i class="el-icon-close" @click="dialogVisible=false"></i>
  </div>
  <el-tabs v-model="tabs" type="border-card">
    <el-tab-pane name="tab1">
      tab1
    </el-tab-pane> 
    <el-tab-pane name="tab2">
      tab2
    </el-tab-pane>
  </el-tabs>
</el-dialog>

结果是页面依旧卡死了，原来是dialogVisible=false的原因。找到原因就好办了。

3. 使用v-if代替el-dialog的visible属性。

不再赘述

<el-dialog
  v-if="dialogVisible2"
  :visible.sync="true"
  :show-close="false">
  <div slot="title" class="dialog-title">
    <span>标题</span>
    <i class="el-icon-close" @click="dialogVisible2=false"></i>
  </div>
  <el-tabs v-model="tabs" type="border-card">
    <el-tab-pane name="tab1">
      tab1
    </el-tab-pane> 
    <el-tab-pane name="tab2">
      tab2
    </el-tab-pane>
  </el-tabs>
</el-dialog>