iview组件tree实现点击节点勾选复选框

组件格式

<Tree :data="specialList" ref="tree" show-checkbox @on-select-change='selectChange'></Tree>

获取节点信息包含父节点半选/全选状态

this.$refs.tree.getCheckedAndIndeterminateNodes()

勾选节点出发函数selectChange

selectChange(v){
          let val=v[0]
          if(!val){
            val=this.tempTreeSelect
          }else{
            this.tempTreeSelect=val
          }
          let list=this.specialList
          for (let index = 0; index < list.length; index++) {
            const element = list[index];
            if(!val.pId&&val.id==element.id){
              let obj=JSON.parse(JSON.stringify(element))
              obj.checked=!obj.checked
              if(element.checked){
                let childArr=[]
                for (let num = 0; num < element.children.length; num++) {
                  const child = element.children[num];
                  child.checked=false
                  childArr.push(child)
                }
                obj.children=childArr
              }
              this.specialList.splice(index,1,obj)
              break
            }else if(val.pId==element.id){
              for (let num = 0; num < element.children.length; num++) {
                const child = element.children[num];
                if(val.id==child.id){
                  let obj=child
                  obj.checked=!child.checked
                  this.specialList[index].children.splice(num,1,obj)
                  return
                }
              }
            }
          }
        }

点击一节点勾选后重复点击出现返回空的状态，声明一个变量tempTreeSelect称接

遍历父级数组判断点击节点是否是父级节点且找到同一数据

若非父节点则含pId 找到对应子节点更新checked状态

实现过程发现父节点被选中后字节点默认选中，然后再次释放父节点后子节点未变化

在element.checked 父节点选中状态下过滤字节的checked状态

 

selectChange(v){
          let val=v[0]
          if(!val){
            val=this.tempTreeSelect
          }else{
            this.tempTreeSelect=val
          }
          let list=this.specialList
          for (let index = 0; index < list.length; index++) {
            const element = list[index];
            let filterList = element.children.filter((item,index)=>{
                return item.checked == true
              })
            if(!val.pId&&val.id==element.id){
              let obj=JSON.parse(JSON.stringify(element))
              
              if(obj.checked){//勾选父级时
                let childArr=[]
                obj.indeterminate=false
                for (let k = 0; k < obj.children.length; k++) {
                  const childElement = obj.children[k];
                  childElement.checked=false
                  childArr.push(childElement)
                }
                obj.children=childArr
              }else if(val.indeterminate){//半选父级时
                obj.indeterminate=false
                let childList=[]
                for (let k = 0; k < obj.children.length; k++) {
                  const childIndeterminate = obj.children[k];
                  childIndeterminate.checked=true
                  childList.push(childIndeterminate)
                }
                obj.children=childList
              }
              obj.checked=!obj.checked
              this.specialList.splice(index,1,obj)
              break
            }else if(val.pId==element.id){
              for (let num = 0; num < element.children.length; num++) {
                const child = element.children[num];
                if(val.id==child.id){
                  let tempObj=child
                  tempObj.checked=!child.checked
                  element.children.splice(num,1,tempObj)
                  //全部取消
                  if(element.indeterminate&&filterList.length==1&&filterList[0].id==val.id){
                    element.indeterminate=false
                    this.specialList.splice(index,1,element)
                  }else if(filterList.length==element.children.length&&element.checked){
                    //全选中取消一个
                    element.checked=false
                    element.indeterminate=true
                    this.specialList.splice(index,1,element)
                  }
                  return
                }
              }
            }
          }
        }

修复上发代码bug 一个父级多个子集时 选中父级后单选子集无效果