如何根据v-checkbox的值显示/隐藏对应v-tab组件？

核心思路是用数组单独维护需要显示的tab标识（索引/名称），替代全局checked变量，实现单个tab的独立显隐控制：

修改步骤 #

• 替换全局checked变量为visibleTabs数组，初始包含所有tab的索引（默认全部显示）
• 利用v-list-item-group的multiple模式自动维护选中状态，绑定v-model="visibleTabs"并给每个v-list-item设置对应value
• 给v-tab和v-tab-item添加针对性显隐判断，关联visibleTabs数组
• 监听visibleTabs变化，处理激活tab被隐藏时的自动切换逻辑

修改后的完整代码 #

<template>
  <div>
    <v-tabs v-model="activeTab">
      <!-- 只渲染visibleTabs中包含的tab -->
      <v-tab 
        v-for="(item, index) in tabs" 
        :key="`${index}-tab`" 
        v-if="visibleTabs.includes(index)"
      >
        {{ item.name }}
      </v-tab>

      <!-- 对应tab-item同步显隐 -->
      <v-tab-item 
        v-for="(item, index) in tabs" 
        :key="`${index}-tab-item`"
        v-if="visibleTabs.includes(index)"
      >
        <v-card flat>
          {{ item.name }}
        </v-card>
      </v-tab-item>

      <v-menu
        v-model="menu"
        :close-on-content-click="false"
        :nudge-width="200"
        offset-x
      >
        <template v-slot:activator="{ on, attrs }">
          <div class="d-flex align-center">
            <v-btn icon v-bind="attrs" v-on="on">
              <v-icon>mdi-eye</v-icon>
            </v-btn>
          </div>
        </template>
        <v-card>
          <v-list>
            <!-- 用v-list-item-group自动维护选中的tab索引 -->
            <v-list-item-group v-model="visibleTabs" multiple>
              <template v-for="(item, index) in tabs">
                <v-list-item 
                  :key="`${index}-tab`"
                  :value="index" <!-- 绑定当前tab索引作为选中标识 -->
                >
                  <v-list-item-action class="ma-0">
                    <v-checkbox></v-checkbox>
                  </v-list-item-action>
                  <v-list-item-content>
                    <v-list-item-title v-text="item.name"></v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </template>
            </v-list-item-group>
          </v-list>
        </v-card>
      </v-menu>
    </v-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      menu: false,
      // 初始默认显示所有tab，存储tab索引
      visibleTabs: [0, 1, 2],
      tabs: [
        { name: "tab1" },
        { name: "tab2" },
        { name: "tab3" }
      ]
    };
  },
  watch: {
    // 监听选中列表变化，确保激活的tab始终可见
    visibleTabs(newVal) {
      if (!newVal.includes(this.activeTab)) {
        this.activeTab = newVal[0] || 0;
      }
    }
  }
};
</script>

关键说明 #

1. visibleTabs数组：存储当前需要显示的tab索引，避免全局变量导致的批量控制问题
2. v-list-item-group自动维护状态：无需手动编写点击事件，组件会自动处理checkbox的选中/取消逻辑
3. 精准显隐判断：v-if="visibleTabs.includes(index)"确保只有选中的tab才会被渲染
4. 激活tab自动切换：通过watch监听，防止当前激活的tab被隐藏后出现页面异常

内容的提问来源于stack exchange，提问作者Marwen_mxm