解决 elementui@2.13.0 > el-tab-pane 导致浏览器卡死的问题。

$我特意把提示第一位，使用失败，常见错误（一定要看）$

1.最低限制

• vue@2.6.0以上， vue@3.0以下
• element-ui@2.13.0

2.使用el-tab-pane-ext的vue页，运行时内部不能有错误。(F12 可查看 console 是否有提示。)（以及一些属性的类型问题）

3.热编译也可能引起卡死。(具体原因同第二条)。

4.基于3号引发的问题，需要刷新后测试。

起因

起因用 el-tab-pane 与 el-dialog 组合导致浏览器卡死。
经过分析原因是 el-tab-pane 添加 内容 会出现内部死循环，从而导致浏览器卡死。

为什么会这样子？？？？

各方研究发现 element-ui@2.13.0 > el-tab-pane与vue@2.6.0不兼容。。。

所以 vue-cli3 + elelment-ui@2.13.0 创建项目必然会遇见这问题。（elelment-ui@2.7.2版本一上都会有此BUG）

网络上的方案没一个很优雅的解决方案。绝大多数都是降低版本来解决。
纳尼，那不是很多新功能不能用了。所以动手解决了下并发布出来供大家使用。

最低限制

• vue@2.6.0 以上
• element-ui@2.13.0

导包

npm install el-tab-pane-ext -s
// or
yarn add el-tab-pane-ext -s

在 main.js 注入全局

import Vue from 'vue'
import Element from 'element-ui'
import ElTabPaneExt from 'el-tab-pane-ext'

Vue.use(Element)
Vue.use(ElTabPaneExt)

or 局部注入 $(根据需求任选其一，推荐全局)$

import ElTabPaneExt from 'el-tab-pane-ext'
export default {
  components: {
    'el-tab-pane-ext': ElTabPaneExt
  },
}

使用方法

<el-tabs v-model="tabs">
  <el-tab-pane-ext label="tab1" name="tab1">
     <template v-slot:content>
      <h1>Hello 1</h1>
    </template>
  </el-tab-pane-ext>
</el-tabs>

源码地址 求点赞

https://github.com/YeYinhai/el-tab-pane-ext