van-tree-select实现全选功能

最新推荐文章于 2025-06-19 09:14:12 发布

CC_Together

最新推荐文章于 2025-06-19 09:14:12 发布

阅读量1.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： javascript vue html 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/CC_Together/article/details/119953609

javascript 同时被 3 个专栏收录

16 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

html

5 篇文章

订阅专栏

本文介绍了如何在Vue中使用van-tree-select组件实现全选功能。通过建立一级分类与二级分类的ID对照表，实现了在选择全选或取消全选时的逻辑处理。同时，提供了一个`changeCatCodeArray`函数来处理全选和取消全选的操作，以及`subsetTo`辅助函数用于判断子集关系。此外，还展示了如何绑定van-tree-select的`active-id.sync`属性以实现功能联动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

van-tree-select实现全选功能

建立一级分类和二级分类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]}

全选功能实现函数

    //全选功能实现算法
    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" 点击二级分类选项时触发