van-tree-select实现全选功能

van-tree-select实现全选功能

1. 建立一级分类和二级分类id对照表，方便后续操作各个id

  //前提：全部选项的id与一级分类id一致且id长度与二级分类不相同并具备前三个字符相同的规律（后面算法实现的基础）
   data=[{id:101,text:一级分类，children:[
   {id:101,text:'全部'},
   {id:101001,text:'二级分类1'},
   {id:101002,text:'二级分类2'}]
 //建立本地一级分类与二级分类的Id对照表减少后面操作
   data.forEach((item)=>{
     const subIdArr=[]
     item.children.forEach((subItem)=>{
      subIdArr.push(subItem.id)
     })
     this.sortIdMap[item.id]=subIdArr
   })
   //this.sortIdMap格式:{101:[101001,101002,101003],102:[102001,102002,102003]}

2. 全选功能实现函数

    //全选功能实现算法
    changeCatCodeArray(item) {
      let activeIds=this.currentParams.catCodeArray;
      //触发全选选项
      if((''+item.id).length==3){
        //判断是选择全部还是取消全部
        if(activeIds.includes(item.id)){  //选择全部
          let _arr=activeIds.concat(this.sortIdMap[item.id])
          activeIds = Array.from(new Set(_arr))
          this.currentParams.catCodeArray=activeIds
        }else{ //选择取消全部
          this.sortIdMap[item.id].forEach((deleteItem)=>{
            activeIds=activeIds.filter(useItem=>useItem!==deleteItem)
          })
          this.currentParams.catCodeArray=activeIds
        }
      }else{
        let parentId=+(''+item.id).substring(0,3);
        if(activeIds.includes(item.id)){  //选择此分类 
          this.sortIdMap[parentId]=this.sortIdMap[parentId].filter(item=>item!==parentId) //剔除父节点Id       
          if(this.subsetTo(this.sortIdMap[parentId],activeIds)){
            activeIds.unshift(parentId)
            this.currentParams.catCodeArray=activeIds
          }
        }else{  //取消此分类
          activeIds=activeIds.filter(item=>item!==parentId) //取消对应的全选
          this.currentParams.catCodeArray=activeIds
        }
      }
    },
    //数组子集判断方法	
    subsetTo(arr1,arr2){
       return arr1.every(v=>arr2.includes(v))
    }
//注：this.currentParams.catCodeArray绑定van-tree-select的active-id.sync
//:active-id.sync="currentParams.catCodeArray"
//@click-item ="changeCatCodeArray" 点击二级分类选项时触发