vue+element:樹級復選框組件使用

之前做得需求一直是下拉框，但是對於樹級的復選框沒有實際用過，在這里記錄一下

1.關於表單的描述：我在這里用的函數是@check，element官網里面還有其他的函數，在嘗試了@check-change和@change之后，采用了check解決了問題

<el-form ref="pollutant" :model="pollutant" :rules="rules" size="small" label-width="80px" class="my-code">
    <el-form-item label="污染物" :seConTrees="seConTrees" class="my-code">
      <el-tree
        :data="seConTrees"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        @check= 'handleCheck'
        v-model="pollutant.pollutant">
      </el-tree>
      <br><el-button :loading="loading" type="primary" @click="pollutantSubmit" style="margin-bottom: 30px">確認</el-button>
    </el-form-item>
</el-form>

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 <length;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 <length;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：有很多控制台打印沒有刪除，這個只是測試數據，不影響結果