自写tab按钮

tab:

<el-button size="mini" :class="{'tabBtn is-active':!isA,'tabBtn':isA}" @click="tabsClick">应用</el-button>
                <el-button size="mini" :class="{'tabBtn is-active':isA,'tabBtn':!isA}" @click="tabsClick" >IP会话</el-button>

data() {
  return {
    isA: false,
 };
},

methods: {
  tabsClick() {
    this.isA=!this.isA;
  },

}

样式控制：

<style lang="scss" scoped>
      .tabBtn {
        background: #F0FAFF;
        color: #2BABE3;
      }
      .tabBtn.is-active {
        background: #2BABE3;
        color: #fff;
      }
</style>

两级tab，为了少控制原组件样式自写比较方便能减少代码量