使用element-ui + vue 时，dialog中嵌入tabs，再次关闭dialog会导致浏览器卡死的解决方案

element-ui 在dialog中嵌套tabs时，再次关闭dialog会导致页面卡死，经过网上查找解决方案，发现是element-ui 和 vue 之间的版本问题

官方tabs例子是这样

  

   

    

     

    
    

     

      <el-tabs v-model="activeName" @tab-click="handleClick">
     
    
   

    

     

    
    

     
    
      <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>
     
    
  

在dialog中嵌套tabs会导致浏览器卡死

  

   

    

     

    
    

     

      <el-dialog
     
    
   

    

     

    
    

     
  
      title=
      "提示"
     
    
   

    

     

    
    

     
  
      :visible.sync=
      "dialogVisible"
     
    
   

    

     

    
    

     
  
      width=
      "30%">
     
    
   

    

     

    
    

     
  
      <el-tabs v-model="activeName" @tab-click="handleClick">
     
    
   

    

     

    
    

     
    
      <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>
     
    
  

如果el-tab-pane中没有内容就会正常，不会导致浏览器卡死

  

   

    

     

    
    

     

      <el-dialog
     
    
   

    

     

    
    

     
  
      title=
      "提示"
     
    
   

    

     

    
    

     
  
      :visible.sync=
      "dialogVisible"
     
    
   

    

     

    
    

     
  
      width=
      "30%">
     
    
   

    

     

    
    

     
  
      <el-tabs v-model="activeName" @tab-click="handleClick">
     
    
   

    

     

    
    

     
    
      <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>
     
    
  

此bug需要element-ui官方进行修复，因此暂时使用此种方案临时解决这个问题

  

   

    

     

    
    

     

      <el-dialog
     
    
   

    

     

    
    

     
  
      title=
      "提示"
     
    
   

    

     

    
    

     
  
      :visible.sync=
      "dialogVisible"
     
    
   

    

     

    
    

     
  
      width=
      "30%">
     
    
   

    

     

    
    

     
  
      <el-row>
     
    
   

    

     

    
    

     
    
      <el-col :span="24">
     
    
   

    

     

    
    

     
      
      <el-tabs v-model="activeName" @tab-click="handleClick">
     
    
   

    

     

    
    

     
        
      <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-col>  
     
    
   

    

     

    
    

     
  
      </el-row>
     
    
   

    

     

    
    

     
  
      <el-row v-if="activeName === 'first'">
     
    
   

    

     

    
    

     

          用户管理
     
    
   

    

     

    
    

     
  
      </el-row>
     
    
   

    

     

    
    

     
  
      <el-row v-if="activeName === 'second'">
     
    
   

    

     

    
    

     

          配置管理
     
    
   

    

     

    
    

     
  
      </el-row>
     
    
   

    

     

    
    

     
  
      <el-row v-if="activeName === 'third'">
     
    
   

    

     

    
    

     

          角色管理
     
    
   

    

     

    
    

     
  
      </el-row>
     
    
   

    

     

    
    

     
  
      <el-row v-if="activeName === 'fourth'">
     
    
   

    

     

    
    

     

          定时任务补偿
     
    
   

    

     

    
    

     
  
      </el-row>
     
    
   

    

     

    
    

     

      </el-dialog>
     
    
  

此方案可以暂时解决dialog中嵌入tabs，再次关闭dialog会导致浏览器卡死的bug

如果有什么问题，欢迎大家留言~！