如何在Vuetify Tabs组件中正确添加二级子标签实现嵌套菜单

问题根因 #

你的用法不符合Vuetify Tabs组件的设计规范，属于组件选型不匹配：

• v-tab仅作为标签项的触发容器，内部不支持嵌套另一组v-tabs组件，强行嵌套会直接导致布局错乱
• Tabs组件本身定位是平级内容的切换，原生不支持多级嵌套菜单的交互逻辑

你遇到的错误效果如下：

最优解决方案：改用v-list实现多级侧边导航 #

垂直场景的多级菜单用Vuetify原生的v-list组件实现，天然支持嵌套展开、样式规范，配合动态内容渲染即可完全匹配你的需求，示例代码如下：

<template>
  <v-container v-if="userLoaded" fluid>
    <v-row>
      <!-- 侧边多级导航区 -->
      <v-col cols="3">
        <v-list density="compact" nav>
          <template v-for="tab in tabs" :key="tab.title">
            <!-- 无子菜单的一级导航 -->
            <v-list-item
              v-if="!tab.subtabs || !tab.subtabs.length"
              :value="tab.title"
              @click="activeTab = tab.title"
            >
              <v-list-item-title>{{ tab.title }}</v-list-item-title>
            </v-list-item>
            <!-- 有子菜单的一级导航，可展开 -->
            <v-list-group v-else :value="tab.title" prepend-icon="" >
              <template v-slot:activator="{ props }">
                <v-list-item v-bind="props">
                  <v-list-item-title>{{ tab.title }}</v-list-item-title>
                </v-list-item>
              </template>
              <v-list-item
                v-for="(subtab, index) in tab.subtabs"
                :key="index"
                :value="`${tab.title}-${subtab.title}`"
                @click="activeTab = `${tab.title}-${subtab.title}`"
                class="pl-8"
              >
                <v-list-item-title>{{ subtab.title }}</v-list-item-title>
              </v-list-item>
            </v-list-group>
          </template>
        </v-list>
      </v-col>
      <!-- 右侧内容展示区 -->
      <v-col cols="9">
        <profile v-if="activeTab === 'Profile' || activeTab.startsWith('Profile-')" @updateloader="updateLoader" />
        <finance v-if="activeTab === 'Finance'" :user="user" :loading="loading" @updateloader="updateLoader" />
        <h1 v-if="activeTab === 'Inventory'">Inventory goes here</h1>
        <notifications v-if="activeTab === 'Notifications'" />
        <workgroup v-if="activeTab === 'WorkGroup'" />
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Profile from './children/profile.vue';
import Finance from './children/finance.vue';
import Notifications from './children/notifications.vue';
import Workgroup from './children/workgroup.vue';

export default {
  name: 'Settings',
  components: { Profile, Finance, Notifications, Workgroup },
  data() {
    return {
      activeTab: 'Profile', // 默认选中项
      tabs: [{ title: 'Profile', subtabs: [{ title: 'one' }, { title: 'two' }] }, { title: 'Finance' }, { title: 'Inventory' }, { title: 'Notifications' }, { title: 'WorkGroup' }],
      // 其他原有数据
    }
  },
  // 其他原有方法
}
</script>

可选方案：强制用Tabs实现的调整方法 #

如果一定要保留Tabs组件的交互，需要把嵌套的子tabs移到外层v-tabs的同级，不要放在v-tab内部，给子标签添加左侧缩进样式区分层级，缺点是无法实现折叠收起的交互，扩展性差。

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