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>