Elder-ui El-Tabs solution for jamming

The problem

A few days ago, I found that in the vue2. x project, using the El-Tabs component in Element-UI caused the page to freeze and no buttons could be clicked. Chrome browser reported the Bug that the page did not respond.

This issue was also mentioned in the Element-UI issue, but hasn’t been fixed yet: github.com/ElemeFE/ele…

The solution

We can wrap the El-Tabs component with el-Row and el-Col components so that the page doesn’t get stuck:

<div class="demo">
  <el-row>
    <el-col :span="24">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="User Management" name="first">User management</el-tab-pane>
        <el-tab-pane label="Configuration Management" name="second">Configuration management</el-tab-pane>
        <el-tab-pane label="Role Management" name="third">Role management</el-tab-pane>
        <el-tab-pane label="Timed task compensation" name="fourth">Timed task compensation</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>
Copy the code