【Element】标签页 el-tabs

ElementUI

切换事件

<el-tabs v-model="active" @tab-click="handleClick">
  <el-tab-pane label="用户管理" name="user">用户管理</el-tab-pane>
  <el-tab-pane label="角色管理" name="set">配置管理</el-tab-pane>
</el-tabs>

data() {
  return {
    active: 'user'
  };
},
methods: {
  handleClick(tab, event) {
    if (tab.name == 'user') {
      this.user();
    } else {
      this.set();
    }
  },
  user() {
    console.log('用户管理');
  },
  set() {
    console.log('配置管理');
  }
}

样式

.user_order {
  /deep/ .el-tabs__nav-wrap {
    .el-tabs__nav-scroll {
      height: 100%;
    }
    .el-tabs__active-bar {
      background-color: #ef0016;
    }
    .el-tabs__item {
      text-align: center;
    }
    .el-tabs__item.is-active {
      color: #ef0016;
    }
    .el-tabs__item:hover {
      color: #ef0016;
    }
  }
}