Vue.js菜单权限项目：解决子菜单全选取消后仍选中的问题

问题核心 #

你遇到的问题是全选按钮的状态切换未正确同步子菜单选中状态：手动选中部分子菜单后点击全选，所有子菜单会被选中，但取消全选时，之前手动选中的子菜单仍保持选中，导致状态不一致。

解决方案 #

根据需求场景，提供两种常见处理方案：

方案一：取消全选时，所有子菜单全部取消选中 #

这种逻辑下，全选按钮作为「全选/全不选」的切换开关：

1. 给每个父菜单添加isAllSelected状态，绑定到全选按钮的勾选状态。
2. 编写两个核心方法：
   • 切换全选时，将父菜单下所有子菜单的checked状态同步为全选按钮的当前状态。
   • 监听子菜单的勾选变化，当所有子菜单都被选中时自动激活全选按钮；只要有一个子菜单未选中，就取消全选按钮的勾选状态。

关键代码示例：

<template>
  <!-- 父菜单全选按钮 -->
  <input 
    type="checkbox" 
    v-model="menu.isAllSelected" 
    @change="toggleAllSubmenus(menu)"
  >
  <!-- 子菜单复选框 -->
  <input 
    type="checkbox" 
    v-model="submenu.checked" 
    @change="updateAllSelectedStatus(menu)"
  >
</template>

<script>
export default {
  methods: {
    toggleAllSubmenus(menu) {
      menu.submenus.forEach(sub => {
        sub.checked = menu.isAllSelected;
      });
    },
    updateAllSelectedStatus(menu) {
      menu.isAllSelected = menu.submenus.every(sub => sub.checked);
    }
  }
}
</script>

方案二：取消全选时，恢复到全选前的子菜单选中状态 #

如果需要保留全选前的手动选择状态，需额外记录子菜单的历史选中状态：

1. 给每个父菜单添加isAllSelected和preSubmenuChecked两个状态字段，其中preSubmenuChecked用于存储全选前子菜单的选中状态。
2. 全选按钮点击逻辑：
   • 从「未全选」切换到「全选」时，先保存当前所有子菜单的checked状态，再将所有子菜单设为选中。
   • 从「全选」切换到「未全选」时，将子菜单的选中状态恢复为之前存储的历史状态。

关键代码示例：

<template>
  <input 
    type="checkbox" 
    v-model="menu.isAllSelected" 
    @change="toggleAllWithHistory(menu)"
  >
</template>

<script>
export default {
  methods: {
    toggleAllWithHistory(menu) {
      if (menu.isAllSelected) {
        // 全选前保存子菜单当前状态
        menu.preSubmenuChecked = menu.submenus.map(sub => sub.checked);
        // 选中所有子菜单
        menu.submenus.forEach(sub => sub.checked = true);
      } else {
        // 取消全选时恢复历史状态
        if (menu.preSubmenuChecked) {
          menu.submenus.forEach((sub, index) => {
            sub.checked = menu.preSubmenuChecked[index];
          });
        } else {
          // 无历史状态时默认全不选
          menu.submenus.forEach(sub => sub.checked = false);
        }
      }
    }
  }
}
</script>

注意事项 #

• 确保父菜单与子菜单的状态双向绑定，避免出现状态不同步的情况。
• 如果菜单数据来自后端，需在数据初始化阶段为每个父菜单添加对应的状态字段。

内容的提问来源于stack exchange，提问作者16_018_RHR