默认情况下，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"，即可让多个 实现真正独立、并行的展开控制，显著提升多区域操作菜单的用户体验与开发效率。

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