vue中循环多组checkbox-group

1. 效果展示

实现多组数据分组展示并实现勾选功能，使用的是 element-ui 的 checkbox-group 组件实现的。

项目中实现效果：

这个组件使用起来真的要注意踩坑，仔细阅读理解官网给的这段介绍，后面写代码都会涉及到。

2. 代码实现

 html 代码

           

                  

                     handleCheckAll(val, item)"  // 全选按钮触发方法
                        :indeterminate="itemIndeterminate(item)"  // 是否全选
                        v-model="item.flag"      //v-model 绑定，布尔值决定勾选状态
                        >{{item.poolName}}
                      
                        {{items.infoName}}
                      
                 
           

js 代码

      selectedList:[],  // 选中数据（数组）infoArray:[       // 后端返回数据格式（多级）// {
        //   poolName:1,
        //   infoList:[{
        //     infoId:14324,
        //     infoName:ces
        //   }]
        // }
      ],

init(){listAllCard().then(res=>{this.cardList=res.data})
      listAllInfo().then(res=>{
        // 添加是否全选标识
        this.infoArray=(res.data).map((v)=>({...v,flag:false}))
      })
    },
    // 全选
    handleCheckAll(val,item){
       // 过滤掉没有选中的数据，item.child 中不包含 v 时返回 -1
      const next=item.infoList.map(item=>item.infoId)
      const filterArr = this.selectedData.filter((v) => next.indexOf(v) == -1
      );
      this.selectedData= val ? filterArr.concat(next) : filterArr;
    },
     itemIndeterminate(item) {const infoLists=item.infoList.map(ite=>ite.infoId)
      return (infoLists.some((v) => this.selectedData.indexOf(v) > -1) &&
        !infoLists.every((v) => this.selectedData.indexOf(v) > -1)
      );
    },
    // 勾选变化方法
    handleChanges(val){const infoLists=val.infoList.map(ite=>ite.infoId)
      infoLists.every((v) => {if (this.selectedData.indexOf(v)>-1) {val.flag = true;}else{val.flag=false}
        });
    },
    handleAdd(row){this.reset();
      this.form.cardId=row.cardId
      this.form.templateId=row.templateId
      this.postData.templateId=row.templateId
      this.cardList.forEach(element => {if(element.cardId==row.cardId){this.cardName=element.cardName}
      });
      this.templateName=row.templateName

      // 回显
      this.selectedData=[]
      getList(row.templateId).then(res=>{res.data.forEach(element => {this.selectedData.push(element.infoId)

          // 判断是否全选 (放在 this.selectedData 数据获取完成后，异步请求下数据如果还未存入会导致读取不到，一开始了放在外层，导致回显失败)
          this.infoArray.forEach((item,index)=>{this.tempList[index]=item.infoList.map(ite=>ite.infoId)
            this.tempList[index].some((v) => {if (this.selectedData.indexOf(v)==-1) {item.flag = false;}else{item.flag=true}
            });
          })
        });
      })
      this.open = true;
      this.title = "设置卡申请模版申请信息";
    },

3. 总结

1. 因为官网给出的 checkbox group 绑定的数据格式是数组，而在项目中接收的数据通常是对象数组，我这里 label 绑定的是数组中对象的 id 属性，点击获取的是 id 的数组，在最后提交数据时需要做处理。

2. 一开始也尝试了 label 绑定整个对象，这样获取到的直接便是最终需要的对象数组，展示和添加是可以实现的，但是回显遇到了问题，在网上看是回显的数据格式要与选中的数组中对象的格式一致，尝试了没有效果，后面再研究一下。

3. 在网上看到了一种方法，使用 JSON.stringify() 使 label 绑定对象转换的字符串，还没有尝试是否可行，先记录一下。

  
    {{item.name}}