把element ui Checkbox 多选框的全选从【一组】改成【多组】

把element的全选从一组改成多组

 变成多个数组，能同时全选，非全选，效果如下

代码如下

      uusdList: [ //数据
        {
          country:'埃及',
          isUpdate: true,
          isIndeterminate: true,
          checkAll: false,
          checkedChannel: [],
          channelList: [
            { name: '设备1',mode: 'uusd'},
            { name: '设备2', mode: 'app' }
          ]
        },
        {
          country: '加纳',
          isUpdete: true,
          isIndeterminate: true,
          checkAll: false,
          checkedChannel: [],
          channelList: [
            { name: '设备3', mode: 'uusd' },
            { name: '设备4', mode: 'app' }
          ]
        }
      ],
      isKey: Math.random(),      

         <div v-for="(item, index) in uusdList">
            <el-checkbox :indeterminate="item.isIndeterminate"
              v-model="item.checkAll" :key="isKey"
              @change="handleCheckAllChange(item.checkAll, index)">
              全选
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="item.checkedChannel" @change="handleCheckedCitiesChange(item.checkedChannel, index)">
              <el-checkbox v-for="(changeval, j) in item.channelList" :label="changeval.name" :key="j">
                {{ changeval.name }}
              </el-checkbox>
            </el-checkbox-group>
          </div>

 

调用的方法如下

   handleCheckAllChange(val, index) {
      console.log('val-00',val, index);
      let nameArr = [];
      this.uusdList[index].channelList.forEach(item => {
        nameArr.push(item.name);
      });
      console.log('nameArr---', nameArr);
      this.uusdList[index].checkedChannel = val ? nameArr : [];
      this.uusdList[index].isIndeterminate = false;
      console.log('this.uusdList---', this.uusdList);
    },
    handleCheckedCitiesChange(value, index) {
      console.log('value-111', value, index);
      console.log('this.uusdList---222', this.uusdList);
      let checkedCount = value.length;
      this.uusdList[index].checkAll = checkedCount === this.uusdList[index].channelList.length;
      this.uusdList[index].isIndeterminate = checkedCount > 0 && checkedCount < this.uusdList[index].channelList.length;
　　　 this.isKey = Math.random();
    }

 以上就是相关代码，把数据变成一个大数组，所有的内置参数都放到数组里，方法触法提时候通过下标index定位去做修改；