elementUI 怎么让tabs的切换跟着你的按钮来切换

Question

我想给elementUI的tabs加两个按钮，来控制选项卡的切换，点击‘前’，选项卡就切换到公司1；点‘后’，选项卡就切换到公司3

我该怎么做？

Answer 1

思路就是点击按钮的时候，控制el-tabs的v-model的值即可。

示例：
elementUI 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>

    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()
      }
    }