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

陌上人如玉
  • 74

image

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

我该怎么做?

回复
阅读 5.1k
3 个回答
北堂棣
  • 6.5k
✓ 已被采纳

思路就是点击按钮的时候,控制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()
      }
    }
人间星河灿烂
  • 2
新手上路,请多包涵

tab组件哪个标签被激活是靠key实现的,只需要去控制被激活的key列表值就行了

贤狼夏萝
  • 8

image.png
name设置为1,2,3,4点击按钮让activeName加一或者减一即可

<template>
  <div id="app">
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="1">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="2">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="3">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="4">定时任务补偿</el-tab-pane>
  </el-tabs>
  <el-button type="primary" @click="add">加</el-button>
  <el-button type="success" @click="less">减</el-button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      activeName:"3"
    };
  },
  methods: {
    handleClick() {
        
      },
      add(){
        this.activeName=Number(this.activeName)+1+''
      },
      less(){
        this.activeName=Number(this.activeName)-1+''
      }
  },
};
</script>

然后坐下临界值的判断即可

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏