vue项目两级全选（多级原理也一样），感觉有点意思，随手一记

需求：

首先说一下思路：我首先把数据列表两级遍历了一下，增加了一个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();
      
    },

上面是拿到所有勾选的值，然后该干嘛干嘛

 

转载于:https://www.cnblogs.com/zhihou/p/10736585.html