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 的 <v-list> 标签上添加 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 属性是控制全局折叠策略的开关。只需一层配置，即可优雅解除默认互斥限制，无需额外状态管理或事件拦截。
