vue+element:树级复选框组件使用

之前做得需求一直是下拉框，但是对于树级的复选框没有实际用过，在这里记录一下

1.关于表单的描述：我在这里用的函数是@check，element官网里面还有其他的函数，在尝试了@check-change和@change之后，采用了check解决了问题

    
              :data="seConTrees"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        @check= 'handleCheck'
        v-model="pollutant.pollutant">
      
      
确认
    

handleCheck(checkedKeys,checkedNodes,halfCheckedKeys,halfCheckedNodes){
      var len = 0,num = 0;
      var _alen = 0;
      var a = [];
      var b = [];
      var copyArr = [];
      for (var i = 0;i < checkedNodes.checkedNodes.length;i++){
        //记录子节点的索引
        if (checkedNodes.checkedNodes[i].children === null) {
          len++;
          b.push(i)
        }
        //判断是否有全选，如果有，则获取父节点信息的索引
        if (checkedNodes.checkedNodes[i].children != null) {
          num++;
          a.push(i)
        }
      }
      console.log('num')
      console.log(checkedNodes.halfCheckedKeys)
      console.log(num)
      console.log('a')
      console.log(a)
      //如果都是半选状态
      if ( num === 0) {
        //将全是半选的模式设置为1
        this.flag = 1
        //将父节点信息和子节点信息加入到param数组中（这个数组与后台数据交互）
        this.param = []
        let _pollutant = {}
        this.pollutant.projectId = this.idd
        this.pollutant.subCateId = checkedNodes.halfCheckedKeys[checkedNodes.checkedKeys.length-1]
        this.pollutant.cateId = checkedNodes.checkedKeys[checkedNodes.checkedKeys.length-1]
        Object.assign(_pollutant,this.pollutant)
        this.param.push(_pollutant)
        console.log('半选状态')
        console.log(this.param)
      }
      //如果都是全选状态
      if (num > 0 && checkedNodes.halfCheckedKeys.length === 0) {
        //如果由半选进入全选状态，则将数组置空，然后将该父节点下的所有子节点放入数组中
        if (this.flag === 1 )
           this.param = []
        //如果由混合进入全选状态，这时如果将这个父节点的所有子节点加入数组则会有重复数据，这时需要删除之前多加的数据
        if (this.flag === 3) {
          this.param.splice(this.param.length-1,1)
        }
        //获取最新父节点的索引以及该父节点的长度
        _alen=  a.length-1;
        var length = checkedNodes.checkedNodes[a[_alen]].children.length;
        console.log(length)
        //最新父节点下的所有子节点放到数组
        for (var j = 0;j ) {
        let _pollutant = {}
        this.pollutant.projectId = this.idd
        this.pollutant.subCateId = checkedNodes.checkedNodes[a[_alen]].id
        this.pollutant.cateId = checkedNodes.checkedNodes[a[_alen]].children[j].id
        Object.assign(_pollutant,this.pollutant)
        this.param.push(_pollutant)
        }
        console.log('全选状态')
        console.log(this.param)
        //将当前全选状态设置为2
        this.flag = 2;
      }
      //如果是全选和半选都有
      if (num > 0 && checkedNodes.halfCheckedKeys.length != 0)  {
        console.log(checkedNodes.checkedNodes)
        console.log(checkedNodes.halfCheckedNodes)
        _alen = a.length - 1
        console.log(a[_alen])
        //如果之前操作全是半选模式 或者是混合模式 ，则将全选的再加入数组
        if (this.flag === 1 || this.flag === 3) {
          var length = checkedNodes.checkedNodes[a[_alen]].children.length;
          for (var j = 0;j ) {
            let _pollutant = {}
            this.pollutant.projectId = this.idd
            this.pollutant.subCateId = checkedNodes.checkedNodes[a[_alen]].id
            this.pollutant.cateId = checkedNodes.checkedNodes[a[_alen]].children[j].id
            Object.assign(_pollutant,this.pollutant)
            this.param.push(_pollutant)
          }
        }
         console.log(this.flag)
        console.log('flag')
        //将全选之后的节点放到数组中
        //如果之前操作全是全选，则将半选的再加入数组
        if (this.flag === 2 ) {
          console.log('CNlen')
          var CNlen = a[_alen] + checkedNodes.checkedNodes[a[_alen]].children.length +1
          console.log(CNlen)
          console.log(checkedNodes.halfCheckedKeys.length)
          for (var i = CNlen;i < checkedNodes.checkedNodes.length; i++) {
            let _pollutant = {}
            this.pollutant.projectId = this.idd
            this.pollutant.subCateId = checkedNodes.halfCheckedKeys[checkedNodes.halfCheckedKeys.length-1]
            this.pollutant.cateId = checkedNodes.checkedNodes[i].id
            Object.assign(_pollutant,this.pollutant)
            this.param.push(_pollutant)
          }
        }
        console.log('全选和半选')
        console.log(this.param)
        this.flag = 3
      }
    },

这个函数因为测试数据不够多，所以还不是很成熟，后续可能会更新

PS：有很多控制台打印没有删除，这个只是测试数据，不影响结果

 

转载于:https://www.cnblogs.com/purple-windbells/p/11285441.html