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

你可能感兴趣的:(javascript)