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><!-- 分组 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]}"><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]}"><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 属性是控制全局折叠策略的开关。只需一层配置，即可优雅解除默认互斥限制，无需额外状态管理或事件拦截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
