解决 [email protected] > el-tab-pane 导致浏览器卡死的问题。

起因

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

为什么会这样子？？？？

各方研究发现 [email protected] > el-tab-pane与[email protected]不兼容。。。

所以 vue-cli3 + [email protected] 创建项目必然会遇见这问题。（[email protected]版本一上都会有此BUG）

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

最低限制

• [email protected] 以上

导包

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 局部注入 $\color{red}(根据需求任选其一，推荐全局)$

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