【Web前端问题】v-for 循环产生多组 checkBoxGroup，组数不定，都绑定了一个 model--checkAll，如何实现每组全选？

公司的boss系统需求，用vue和iview实现。现有如下代码:

<Form-item label="保养设备"  v-if="taskType">
    <template>
      <p>{{checkAll}}</p>
      <div class="bg-f5 p10" v-for="(item,index) in equip" v-if="equip">
        <span class="f16 f2a">{{item.type}}</span>
        <Row class="bg-white p10">
          <p>
            <input type="checkbox" :data-type="item.type" @click="checkBoxAll(item.type)" />
            <label>全选</label>
          </p>
          <div v-for="child in item.child" class="f14" style="float:left;margin-right: 12px;" >
            <input type="checkbox" :value="child.id" v-model="checkAll" :data-type="item.type" />
            <label>{{child.equipmentNum}}</label>
          </div>
        </Row>
      </div>
    </template>
</Form-item>
checkBoxAll (type) {
  console.log(type); // 能拿到每个分组的 type
},

图片描述

可以发现，每一个 checkBox 都绑定到 v-model:checkAll 上，最后我要提交的也是checkAll 这个数组。但是由于 一共有 12-18 个分组，每个分组要实现全选，同时也要将数组同步到 checkAll 上，请问如何实现这个全选的功能。
尝试一：用 iview 的 checkBoxGroup，没能实现每一组的 checkBox 都能分别全选 没能实现。
尝试二：用 原生checkBox 来实现，每一个都绑定 checkAll，然后再通过每一组的 type 来实现全选。
整整一天了，都没实现，希望能得到大神们的助攻。O(∩_∩)O谢谢

回答：

最后还是根据每一组checkbox都有不同的ref来获取每一组的dom结构，然后判断车“点击全选的类型”来对每一组的checkbox的checked value 辅 TRUE or false ，同事(!!)赋值到this.checkAll上。方法有点绕，但是实现了。
贴上代码

<Form-item label="保养设备" v-if="taskType">
  <template>
    <p>{{checkAll}}</p>
      <div class="bg-f5 p10" v-for="(item,index) in equip" v-if="equip">
        <span class="f16 f2a">{{item.type}}</span>
        <Row class="bg-white p10">
          <p>
            <input type="checkbox" :data-type="item.type" @click="checkBoxAll($event,item.type)"/>
            <label>全选</label>
          </p>
          <div v-for="child in item.child" class="f14" style="float:left;margin-right: 12px;">
          <input type="checkbox" :value="child.id" v-model="checkAll" :ref="item.type"/>
          <label>{{child.equipmentNum}}</label>
        </div>
      </Row>
    </div>
  </template>
</Form-item>

checkBoxAll($event, groupType) {
  var arr = this.checkAll;
  if ($event.target.checked == true) {
    this.$refs[groupType].forEach(function (item, index, input) {
      item.checked = true;
      if(arr.indexOf(parseInt(item.value)) == -1){
        arr.push(parseInt(item.value));
      }
    })
  } else {
    this.$refs[groupType].forEach(function (item, index, input) {
      item.checked = true;
      var indexToDel = arr.indexOf(parseInt(item.value))
        if (indexToDel != -1){
          arr.splice(indexToDel,1)
      } 
    })
  }
  console.log(this.checkAll);
},

回答：

我以前碰到这种的问题都是进去的时候先生成一个结果集数组
result = [ [1,2,3],[4,5],[6,7] ];
有多少组选择result就有多少的长度,如果是create页面, 这个result一进来肯定是空的, 如果是编辑页面
根据后端返回的数据初始化这个result结果集
v-for的时候key 和这个result的key 肯定是能一一对应上的,然后就好办了呀,选中了push进来，勾掉了就从
result里删掉他。
是否全选就可以用resut[$key].length()是否等于item.child.length()来判断了

以上是 【Web前端问题】v-for 循环产生多组 checkBoxGroup，组数不定，都绑定了一个 model--checkAll，如何实现每组全选？ 的全部内容， 来源链接： utcz.com/a/142267.html

回到顶部