elementUI 使用Tabs 標簽頁的巨坑

最近在做一個比較大型的項目，其中大量使用到餓了么ui的 Tabs 標簽頁，剛開始並沒有發現異常，隨着版本迭代，項目做到后面的時候測試發現了個很奇怪的bug，有時候瀏覽器直接卡死，甚至無法關閉頁面，且沒有任何的報錯提示。最開始覺得莫名其妙，找不到問題出在哪，經過反復嘗試發現bug復現的時候有個共同點就是切換導航菜單或者頁面點擊跳轉，百度過后發現有人說是 Tabs 標簽頁引起的，需要在el-tabs組件外層使用 row 和 col 組件布局，剛開始不以為然，覺得很荒謬，就沒有理會這個方法，直到后面很久都沒解決這個bug，抱着死馬當作活馬醫的心態嘗試了一下，問題果然解決了，於是在此總結一下Tabs 標簽頁可能遇到的問題：

1.直接按照官方示例上寫，需要在el-tabs外使用 row 和 col 組件布局

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

2.elment版本過高,降低版本試試

3.切換內容不寫在el-tab-pane元素內，使用vue 內置組件 component 的用法動態切換組件

<el-tabs v-model="activeName">  
            <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>
<component :is="isComponent" ></component>
<script>
export default {
    data() {
       return {
　　　　　　　activeName: "first",
            componentsList: {
                first: "First",//需要引入具體的組件
                second: "Second",
　　　　　　　　　　third: "Third",
　　　　　　　　　　four: "Four"
              }
       }
    },
    computed: {
        isComponent() {
              return this.componentsList[this.activeName];
        }
    }
}
</script>