如何让 Vuetify 的多个 v-list-group 同时保持展开状态-js教程-PHP中文网

默认情况下，Vuetify 的会独占式管理下拉组的展开状态，导致点击一个分组内的项时另一个已展开的分组自动收起；通过设置 open-strategy="multiple" 可启用多开模式，实现 Admin 和 Actions 等多个下拉组独立展开、互不干扰。

默认情况下，vuetify 的 `` 会独占式管理下拉组的展开状态，导致点击一个分组内的项时另一个已展开的分组自动收起；通过设置 `open-strategy="multiple"` 可启用多开模式，实现 admin 和 actions 等多个下拉组独立展开、互不干扰。

在使用 Vuetify 的构建多级导航或操作菜单时，一个常见需求是：多个分组（如 “Admin” 和 “Actions”）应能同时保持展开状态，用户点击任一分组内的子项（如 “Settings” 或 “Delete”）时，不应影响其他分组的展开状态。但默认行为下，采用单例式展开策略（open-strategy="single"），即任意一次交互（包括点击子项）都会触发状态重同步，导致非当前分组被强制关闭。

✅ 解决方案非常简洁：为添加 open-strategy="multiple" 属性：

<template><v-card class="mx-auto" width="300"><v-list v-model:opened="open" open-strategy="multiple">
    >
      <v-list-item prepend-icon="mdi-close"></v-list-item><v-list-group value="Admin"><template v-slot:activator="{ props }"><v-list-item v-bind="props" title="Admin"></v-list-item></template><v-list-item v-for="([title], i) in admins" :key="i" :title="title" :value="title"></v-list-item></v-list-group><v-list-group value="Actions"><template v-slot:activator="{ props }"><v-list-item v-bind="props" title="Actions"></v-list-item></template><v-list-item v-for="([title], i) in cruds" :key="i" :title="title" :value="title"></v-list-item></v-list-group></v-list></v-card></template><script>
export default {
  data: () => ({
    open: ['Admin', 'Actions'], // ✅ 可预设多个初始展开项
    admins: [
      ['Management', 'mdi-account-multiple-outline'],
      ['Settings', 'mdi-cog-outline'],
    ],
    cruds: [
      ['Create', 'mdi-plus-outline'],
      ['Read', 'mdi-file-outline'],
      ['Update', 'mdi-update'],
      ['Delete', 'mdi-delete'],
    ],
  }),
}
</script>

? 注意事项：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

open-strategy="multiple" 是 Vuetify 3.4+ 推荐的标准方式，替代了旧版中需手动维护多个 v-model:open 的复杂逻辑；
v-model:opened 绑定的数组值（如 ['Admin', 'Actions']）将精确反映当前所有展开的分组值，支持动态增删；
若需禁用某分组的展开/折叠交互（如仅展示不可切换），可对添加 :disabled="true"；
子项点击默认不会修改 opened 状态 —— 它只响应分组激活器（activator）的点击；若需点击子项后仍保持展开，无需额外处理，multiple 模式天然支持。

? 总结：只需一行属性 open-strategy="multiple"，即可让多个实现真正独立、并行的展开控制，显著提升多区域操作菜单的用户体验与开发效率。