需求：
首先说一下思路：我首先把数据列表两级遍历了一下，增加了一个checked属性来控制勾选和不勾线
this.productList.forEach((item)=>{
this.$set(item,"checked",false);
item.goodList.forEach((subItem)=>{
this.$set(subItem,"checked",false);（我这里用$set,添加属性，
因为vue是数据挟持的原理，他通过Object.defineProperty来监听属性的变化,我防止层级太深，
属性变化vue监听不到（或者监听到了dom渲染不了），如果监听到了你可以不加，加了肯定是对的）
})
})
页面结构
<div>
<p>
<span class="checkSpan"><input type="checkbox" v-model="checkAll" @change="selectAll"><label></label>全选</span></p>
<div class="itemSection" v-for="(item,index) in productList">
<div class="item-top">
<span class="checkSpan"><input type="checkbox" v-model="item.checked" @change="selectItem1(item,productList)"><label></label>{{item.typeName}}</span>
</div>
<div class="subItemSection">
<div class="subItem" v-for="(subItem,subIndex) in item.goodList">
<div class="">
<span class="checkSpan"><input type="checkbox" v-model="subItem.checked" @change="selectItem2(item,productList)"><label></label>{{subItem.goodName}}</span></div>
</div>
</div> </div>
</div>
以下步骤是建立在你把数据循环遍历加了一个checked属性的基础上实现的
1第一步全选 checkAll:false,
selectAll(){
this.productList.forEach(item=>{
item.checked=this.checkAll;
item.goodList.forEach(subItem=>{
subItem.checked=this.checkAll;
})
})
},//定一个变量，你通过全选的变量来递归让所有的数据勾选或不勾选
2第二步
selectItem1(item,productList){
let firstItem=productList.every(item=>{
return item.checked==true;
}) //这步所有的一级，度勾选控制全选勾选
if(firstItem){
this.checkAll=true;
}else{
this.checkAll=false;
}
item.goodList.forEach(subItem=>{
subItem.checked=item.checked;
})//控制二级的勾选
},
3这里都是针对的都是当前的二级
selectItem2(item,productList){
let lengths=item.goodList.length;
let checkeds=item.goodList.filter(subItem=>{
return subItem.checked==true;
});
if(lengths==checkeds.length){
item.checked=true;//2级勾选的数量和二级的数量相同，让一级勾选
let firstItem=productList.every(item=>{
return item.checked==true;
})//所有二级勾选控制一级勾选，然后让全选勾选，或者不勾选
if(firstItem){
this.checkAll=true;
}else{
this.checkAll=false;
}
}else{
item.checked=false;
this.checkAll=false;
}
},
chooseProduct(){
this.saveSelectProduct=[];
this.productList.forEach(item=>[
item.goodList.forEach(subItem=>{
if(subItem.checked==true){
this.saveSelectProduct.push({
goodName:subItem.goodName,
goodId:subItem.id
})
}
})
]);
this.productVisible=false;
let productNameList=this.saveSelectProduct.map(item=>{
return item.goodName
})
this.ruleForm.productJson=productNameList.toString();
},
上面是拿到所有勾选的值，然后该干嘛干嘛
