treeSelect中遇到的问题

前言：treeSelect部门数，不同于element-UI中的tree，没有那么多方法可供使用，这就限制了有些操作

1、比如某些逻辑中，后端需要子部门id数组

        可以通过设置 :disableBranchNodes='true'来实现只能选择子节点来实现，但是这种体验非常不好，如果部门过多，我们希望通过选择父节点来实现全选子节点，就没有办法实现

在看了treeSelect的API文档之后，确定没有相关props可以使用，于是就想到了ref,通过打印台查看ref的相关节点，可以实现选中父节点，也能拿到子节点所有ID，话不多说，上代码

<!--multiple是设置多选，show-checkbox是设置多选框-->
<treeselect
 show-checkbox
 multiple
 ref="tree"
 v-model="form.deptIdList"
 :options="deptOptions"
 :show-count="true"  
 placeholder="请选择部门"
/>



<script>
 //处理排除父节点之后的数组
    objectTrans(arr){
     let a =  arr.map(res=>{
    //判断如果部门数据下没有子节点，就返回此部门id
        if(!res.children){
          return res.id
        }else{
            //如果有子节点，继续遍历
           this.objectTrans(res.children)
        }
      })
       //将返回的数组解构添加到变量中
      this.deptArr.push(...a)
       // 给数组去重
      this.deptArr = Array.from(new Set(this.deptArr))
    },
    //获取部门数  项目中部门树的接口
     getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data;
        //拿到部门树数据调用处理方法
        this.objectTrans(this.deptOptions);
       
      });
    },

//定义一个变量，储存处理后的数组
let deptIds = []
//this.deptArr变量储存的是不包含父节点ID的数组，通过$refs得到的是选中的数组（包含父节点）
let deptArr = this.$refs.tree.forest.selectedNodeIds
//遍历数组,与this.deptArr对比，去重
for(let i=0;i<deptArr.length;i++){
    //如果deptArr在this.deptArr中，说明是子节点，给到新数组，如果不在，跳过
    let a =  this.deptArr.indexOf(deptArr[i])
    if(a>-1){
       deptIds.push(deptArr[i])
     }
}
//最后得到的deptIds就是不包含父节点的所有子节点数组数据

</script>

好了，分享就到这，大家有什么好的方法或者文章有什么不足，可以评论发表出来，一起学习

有不懂的可以随时留言哦