Vuetify 默认限制仅一个 v-list-group 可展开，本文详解通过 <v-list expand> 全局启用多组并行展开的正确方式，并提供可运行示例与关键注意事项。

vuetify 默认限制仅一个 `v-list-group` 可展开，本文详解通过 `` 全局启用多组并行展开的正确方式，并提供可运行示例与关键注意事项。

在 Vuetify 2.x 中，<v-list-group> 组件默认采用“单展开”（accordion）行为：当一个分组打开时，其他已展开的分组会自动收起。这种设计虽适用于导航菜单等场景，但在配置面板、设置中心等需多区域并行操作的界面中往往不适用。

要突破这一限制，核心解法并非作用于单个 v-list-group，而是提升到父级 <v-list> 组件——通过添加 expand 属性（注意是布尔属性，非 :expand="true" 的绑定写法），即可全局禁用自动折叠逻辑，使所有子 v-list-group 独立响应点击状态：

<v-list expand>
  <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"
      @click="menu_change(setting)"
    >
      <v-list-item-title>{{ setting }}</v-list-item-title>
    </v-list-item>
  </v-list-group>

  <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"
      @click="menu_change(setting)"
    >
      <v-list-item-title>{{ setting }}</v-list-item-title>
    </v-list-item>
  </v-list-group>
</v-list>

✅ 关键要点说明：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• expand 是 <v-list> 的原生 prop（Vuetify 2.x 官方文档），非 v-list-group 的属性，因此 multiple 或手动绑定 :value 到 v-list-group 均无效；
• 不需要为每个 v-list-group 单独设置 :value 或 v-model，expand 模式下各分组内部状态完全自治；
• 若需高亮当前激活项（如你的 :class="{'active': openMenu == setting[0]}"），请确保 menu_change() 方法正确更新 openMenu 数据，该逻辑不受 expand 影响，可照常使用；
• 此方案兼容 Vuetify 2.6+ 所有 patch 版本，无需额外 CSS 或事件拦截。

? 进阶提示：
若后续需在部分页面恢复单展开行为，只需移除 <v-list expand> 即可回退至默认 accordion 模式，无需重构分组结构——这体现了 Vuetify 设计的灵活性与声明式控制优势。

通过合理运用 expand 属性，你能在保持代码简洁性的同时，精准满足多区域并行交互的设计需求。

立即学习“前端免费学习笔记（深入）”；