elementUI tabs的切换跟着按钮来切换_el-tabs点击其他按钮自切换

<template>
  <el-tabs v-model="active" @tab-click="handleClick" style="height:100px;">
    <el-tab-pane v-for="(it,index) in tabs" :key="index" :label="it" :name="index.toString()">{{it}}</el-tab-pane>
  </el-tabs>
  <el-button @click="preStep">前</el-button>
  <el-button type="primary" @click="nextStep">后</el-button>
</template>
1
2
3
4
5
6
7

 data() {
      return {
        active: '0',        
        tabs: ['用户管理','配置管理','角色管理','定时任务补偿']
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      preStep() {
        let num = Number(this.active)
        num>0 && num--
        this.active = num.toString()
      },
      nextStep() {
        let num = Number(this.active)        
        num<this.tabs.length-1 && num++
        this.active = num.toString()
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

转自：

https://segmentfault.com/q/1010000023794629?utm_source=tag-newest