el-checkbox-group JSON对象的全选功能(解决el-checkbox-group不支持JSON对象的问题)

<template>
  <div>
		<el-checkbox v-model="checkedAllTop"  @change="handleCheckAllChange1($event)" class="largeCheckAll">大全选{{selectedLength}}</el-checkbox>
	
		<div v-for="(item,index) in tableData" :key="item.id">
			  <el-checkbox v-model="item.checkedAll" @change="handleCheckAllChange2($event,index)" class="checkedAll">小全选{{item.checklist.length}}</el-checkbox>
			  <el-checkbox-group v-model="item.checklist">
				<el-checkbox @change="handleCheckAllChange3(item.checklist,item.aerobicsList,index)"  v-for="(item1,index1) in item.aerobicsList" :label="item1.id" :key="item1.id">{{item1.title}}</el-checkbox>
			  </el-checkbox-group>
		</div>
		
		<div v-for="(item,index) in tableData" :key="item.id" class="result">
			<div v-for="(item1,index1) in item.checklist" :key="item1" class="result-item">
				{{item1}}
			</div>
		</div>
  </div>
</template>

<script>

 export default {
    data() {
      return {
		  selectedLength:0,
		  checkedAllTop:false,//大全选
		  tableData:[
		    {
		       checklist: [],//存放选中的id
		       checkedAll:false,//小全选
		       aerobicsList: [{
		            id: "0b54937bce064abb8d1463e0dc31ab33",
		            title: "如果",
		        },{
		            id: "gdrgr3dg2rdhtfhtfh3tfhdhyjhthrd",
		            title: "电话",
		        },{
		            id: "234gsgrhtfht2fh4tfht23hthdh4rd2h",
		            title: "粉底",
		        },{
		            id: "gdr3drg234drg2ht3dhf3j23yt234jty",
		            title: "多个",
		        },]
		    },
		    {
		       checklist: [],//存放选中的id
		       checkedAll:false,//小全选
		       aerobicsList: [{
		            id: "0b54937bce064abb8d1463e0dc31ab33",
		            title: "个滚",
		        },{
		            id: "3gdrgr2dgrdhtfhtfhtfhdhy33jhthrd",
		            title: "肤饭",
		        },{
		            id: "34gsg2rhtfhtfht5fh3423thth35dhrdh",
		            title: "色粉",
		        },{
		            id: "2gdrdr23gdrghtdhfjfee52sseytj22ty",
		            title: "得分",
		        },]
		    },
		  ],
	  }
	},
	  methods: {
		  handleCheckAllChange1(event){ //大全选
			this.tableData.forEach((item,index)=>{
			  this.handleCheckAllChange2(event,index)
			  if(event == true){
				this.tableData[index].checkedAll = true
			  }else{
				this.tableData[index].checkedAll = false
			  }
			})
			this.largeCheckAll()
		  },
		  handleCheckAllChange2(event,index){ //小全选
			this.tableData[index].checklist = []
			if(event == true){
			  this.tableData[index].aerobicsList.forEach((item)=>{
				this.tableData[index].checklist.push(item.id)
			  })
			}
			this.largeCheckAll()
		  },
		  handleCheckAllChange3(checklist,aerobicsList,index){ //每一项的选中
			if( checklist.length == aerobicsList.length){
			   this.tableData[index].checkedAll = true
			}else{
			  this.tableData[index].checkedAll = false
			}
			this.largeCheckAll()
		  },
		  largeCheckAll(){ //检查大全选是否需要选中
			  this.selectedLength = 0
			  let CheckedAllList = []
			  this.tableData.find((item)=>{
			     if(item.checkedAll == false){ //如果找出小全选中有false的即代表大全选不能选中
					CheckedAllList.push(item)
			     }
				 this.selectedLength += item.checklist.length
			  })
			  if(CheckedAllList.length>0){
			     this.checkedAllTop = false
			  }else{
			     this.checkedAllTop = true
			  }
		  }
	  }
}
</script>

<style scoped>
.largeCheckAll{
	margin-bottom: 40px;
}
.checkedAll{
	margin-top: 20px;
}
.result{
	margin-top: 30px;
	min-height: 50px;
	border-radius: 5px;
	border: 1px solid #2C3E50;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.result-item{
}
</style>