Element-UI el-tabs 组件卡死解决方案

问题

日前在项目中发现，在 Vue2.x 的项目中使用 Element-UI 里面的 el-tabs 组件，会无端导致页面卡死，任何按钮都无法点击，Chrome 浏览器直接报出页面无响应的 Bug 。

Element-UI 的 issue 里也有人提了这个问题，但目前为止还没有修复： github.com/ElemeFE/ele…

解决方案

我们可以使用 el-row 和 el-col 组件将 el-tabs 组件包裹起来，这样就不会造成页面卡死了：

<div class="demo">
  <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>
</div>
<script>
  export default {
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>