vue3 el-tab页面内按钮点击实现切换

在Vue 3中，`el-tabs`组件是Element Plus库中的一个用于创建标签页切换的功能组件。要在`el-tab`页面内部的按钮点击事件中实现切换，你需要按照以下步骤操作：

1. 首先，确保已安装Element Plus并导入`ElTabs`和`ElTabPane`组件：

<template>
  <div>
    <el-tabs v-model="activeName">
      <!-- Tab 标签 -->
      <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.name" :name="item.name">
        <button @click="switchTab(index)">切换到第 {{ item.name }} 项</button>
        <!-- 内容区域 -->
        <p>这是{{ item.name }}的内容</p>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

2. 然后，在你的Vue组件数据(`data`)中定义当前激活的标签名以及数组，存储所有tab的信息：

export default {
  data() {
    return {
      activeName: '1', // 初始激活的tab名称
      tabs: [
        { name: '1', label: 'Tab 1' },
        { name: '2', label: 'Tab 2' }, // 添加更多的tab选项
      ],
    };
  },
  methods: {
    switchTab(index) {
      this.activeName = index.toString(); // 当点击按钮时，更新activeName指向新的tab
    },
  },
};

在这个例子中，每个按钮的`@click`事件会触发`switchTab`方法，将当前激活的索引作为字符串传递给`activeName`，从而切换对应的`el-tab-pane`。