单击按钮时如何转到el-tabs中的特定选项卡

【问题标题】：How to go to specific tab in el-tabs when the button is clicked单击按钮时如何转到el-tabs中的特定选项卡
【发布时间】：2022-09-15 22:25:06
【问题描述】：

我有使用元素 ui 的标签：

<template>
  <div>
    <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\">
    <el-tab-pane label=\"User\" name=\"first\">User</el-tab-pane>
    <el-tab-pane label=\"Config\" name=\"second\">Config</el-tab-pane>
    <el-tab-pane label=\"Role\" name=\"third\">Role</el-tab-pane>
    <el-tab-pane label=\"Task\" name=\"fourth\">Task</el-tab-pane>
  </el-tabs>
  <button @click=\"handleTab\"></button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        activeName: \'first\'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

当我单击按钮 handleTab 时，我想转到第一个选项卡，在此示例中为 User。有没有办法做到这一点？

标签： vue.js vuejs2 tabs vue-component element-ui

【解决方案1】：

您应该创建方法handleTab，您已经在单击按钮时调用了该方法，并在该方法中将activeName 的值设置为first。

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs>
  <button @click="handleTab">Open User</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'first'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleTab() {
        this.activeName = 'first';
      }
    }
  };
</script>

【讨论】：