Vuetify2.x多个列表组同时展开技巧

Vuetify 2.x 中的 v-list-group 默认强制单展开，让人困扰不已？其实只需在父级 v-list 上添加一个简单的 `expand` 属性，就能彻底解除互斥限制，让多个分组自由、独立地同时展开或收起——无需复杂状态管理、不依赖无效的 `multiple` 或误导性的 `:value` 绑定，一行配置即刻实现清爽可控的多级菜单体验，尤其适合网络配置、系统设置等需并行浏览多组选项的场景。

Vuetify 的 v-list-group 默认为单展开模式，需通过在父级 v-list 上设置 expand 属性才能实现多个分组同时展开，该属性可禁用自动折叠行为。

Vuetify 的 v-list-group 默认为单展开模式，需通过在父级 v-list 上设置 `expand` 属性才能实现多个分组同时展开，该属性可禁用自动折叠行为。

在 Vuetify 2.x（如 2.6 版本）中，v-list-group 组件默认采用“互斥展开”逻辑：点击一个分组时，其他已展开的分组会自动收起。这种行为由 v-list 的内部状态控制，并不能仅靠给每个 v-list-group 添加 multiple 或手动绑定 :value="true" 来覆盖——因为 multiple 是 v-select 等表单组件的 prop，对 v-list-group 无效；而 :value 在 v-list-group 中仅用于受控模式下的初始状态，不改变全局折叠策略。

✅ 正确解法是：在包裹所有 v-list-group 的 标签上添加 expand 属性（即 expand 布尔 prop）。该属性会关闭 v-list 的自动折叠机制，使各 v-list-group 的展开/收起状态完全独立。

以下是推荐的结构写法：

<v-list expand>
  <!-- 分组 1 -->
  <v-list-group>
    <template v-slot:activator>
      <v-list-item-content>
        <v-list-item-title>Networking</v-list-item-title>
      </v-list-item-content>
    </template>
    <v-list-item
      v-for="(setting, i) in itemsettingsNetworking"
      :key="i"
      :class="{'active': openMenu === setting[0]}"
      @click="menu_change(setting[0])"
    >
      <v-list-item-title>{{ setting[0] }}</v-list-item-title>
    </v-list-item>
  </v-list-group>

  <!-- 分组 2 -->
  <v-list-group>
    <template v-slot:activator>
      <v-list-item-content>
        <v-list-item-title>Interfaces</v-list-item-title>
      </v-list-item-content>
    </template>
    <v-list-item
      v-for="(setting, i) in itemsettingsInterface"
      :key="i"
      :class="{'active': openMenu === setting[0]}"
      @click="menu_change(setting[0])"
    >
      <v-list-item-title>{{ setting[0] }}</v-list-item-title>
    </v-list-item>
  </v-list-group>
</v-list>

⚠️ 注意事项：

• expand 必须作用于 v-list（而非 v-list-group），且需确保所有目标分组均被其直接或间接包裹；
• 若使用了 v-model 绑定 v-list 的展开状态（如 v-model="openGroups"），则 expand 仍需显式声明，否则模型绑定可能干扰多开逻辑；
• v-list-group 自身的 :value 可继续用于初始化状态（例如 :value="true" 强制默认展开），但不再影响其他分组行为；
• 此方案兼容 Vuetify 2.3+，不适用于 Vuetify 3.x（V3 中 v-list-group 已重构，改用 open prop + v-model:open 实现类似效果）。

总结：解决多分组并行展开问题的关键，在于理解 v-list 的 expand 属性是控制全局折叠策略的开关。只需一层配置，即可优雅解除默认互斥限制，无需额外状态管理或事件拦截。

终于介绍完啦！小伙伴们，这篇关于《Vuetify2.x多个列表组同时展开技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！