Vue实现分组复选框全选功能技术求助

我来帮你搞定这个分组复选框的全选功能，其实只需要几步就能实现，咱们一步步来调整代码：

1. 自动分组数据（替代手动维护的optionsGroupsList） #

首先，我们用计算属性把原始的optionsList按group字段自动分组，这样不用手动维护分组列表，新增分组时也能自动识别：

export default {
  data() {
    return {
      actionTypes: actionTypes,
      relationTypes: relationTypes,
      optionsList: [
        {id:1, text: 'Football', group: 'sport'},
        {id:2, text: 'Basketball', group: 'sport'},
        {id:3, text: 'Cookie', group: 'food'},
        {id:4, text: 'Soup', group: 'food'}
      ],
      localValue: []
    }
  },
  computed: {
    // 自动分组：key是分组名（首字母大写），value是对应选项数组
    groupedOptions() {
      return this.optionsList.reduce((groups, option) => {
        // 把group名转成首字母大写，和展示需求一致
        const groupName = option.group.charAt(0).toUpperCase() + option.group.slice(1);
        if (!groups[groupName]) {
          groups[groupName] = [];
        }
        groups[groupName].push(option);
        return groups;
      }, {});
    },
    // 计算每个分组的选中状态：全选/半选/未选
    groupSelectionStatus() {
      const status = {};
      Object.keys(this.groupedOptions).forEach(group => {
        const groupOptionIds = this.groupedOptions[group].map(opt => opt.id);
        const selectedCount = groupOptionIds.filter(id => this.localValue.includes(id)).length;
        
        if (selectedCount === 0) {
          status[group] = 'unchecked';
        } else if (selectedCount === groupOptionIds.length) {
          status[group] = 'checked';
        } else {
          status[group] = 'indeterminate';
        }
      });
      return status;
    }
  },
  methods: {
    // 处理分组复选框的点击事件
    toggleGroupSelection(group) {
      const groupOptionIds = this.groupedOptions[group].map(opt => opt.id);
      const isAllSelected = this.groupSelectionStatus[group] === 'checked';
      
      if (isAllSelected) {
        // 取消全选：移除该组所有id
        this.localValue = this.localValue.filter(id => !groupOptionIds.includes(id));
      } else {
        // 全选：添加该组所有id（去重）
        this.localValue = [...new Set([...this.localValue, ...groupOptionIds])];
      }
    }
  }
}

2. 修改模板，绑定分组复选框的状态和事件 #

接下来更新HTML模板，使用自动分组的数据，同时给分组复选框绑定状态和点击事件：

<link href="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div v-for="(options, group) in groupedOptions" :key="group" class="checkbox-group">
  <!-- 分组全选复选框 -->
  <vs-checkbox 
    :vs-checked="groupSelectionStatus[group] === 'checked'"
    :vs-indeterminate="groupSelectionStatus[group] === 'indeterminate'"
    @change="toggleGroupSelection(group)"
  >
    {{ group }}
  </vs-checkbox>
  
  <!-- 子选项复选框 -->
  <vs-checkbox 
    v-for="option in options" 
    :key="option.id" 
    :vs-value="option.id" 
    v-model="localValue"
  >
    {{ option.text }}
  </vs-checkbox>
</div>

功能说明 #

• 自动分组：通过groupedOptions计算属性，自动把optionsList按group字段分组，并且把分组名转成首字母大写格式，和你的展示需求匹配。
• 状态同步：groupSelectionStatus计算属性会实时判断每个分组的选中状态：
  • 未选：组内没有选项被选中
  • 全选：组内所有选项都被选中
  • 半选：组内部分选项被选中（此时分组复选框会显示半选状态）
• 全选/取消全选：点击分组复选框时，toggleGroupSelection方法会根据当前状态，添加或移除该组所有选项的id到localValue中，实现批量选择。

这样修改后，你就能完美实现分组复选框的全选、取消全选，以及子选项和分组复选框的状态同步啦！

内容的提问来源于stack exchange，提问作者Mike L.