在Vue中使用Element UI的el-tabs组件时，如果你想要在循环生成的el-tabs中单独切换每个tab，@tab-click 怎么绑定

小贵子的博客

已于 2025-01-09 15:10:36 修改

阅读量420

点赞数 2

文章标签： vue.js ui javascript

于 2024-09-11 17:31:36 首次发布

本文链接：https://blog.youkuaiyun.com/zyg1515330502/article/details/142145792

版权

<template>
  <div v-for="(item, index) in tabs" :key="index">
    <el-tabs v-model="activeTab[index]" @tab-click="handleClick2($event, index, item)">
      <el-tab-pane label="用户管理" name="first">用户管理内容</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理内容</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理内容</el-tab-pane>
    </el-tabs>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tabs: [1, 2, 3], // 假设有多个el-tabs
      activeTab: {} // 用一个对象来存储每个tab的激活状态
    };
  },
  created() {
    // 初始化activeTab对象
    this.tabs.forEach((item, index) => {
      this.$set(this.activeTab, index, 'first'); // 假设默认第一个面板是激活的
    });
  },
  methods: {
     handleClick2(tab, index, item) {
          this.$set(this.activeTab, index, tab.name);
     },

    }
};
</script>