vue + element: tree levels box assembly for use

Demand has been done before is a drop-down box, but for tree-level check box is not actually used, where the record about

1. With regard to the form of the description: function here I use the @ check, element official website there is also other functions, after trying the @ check-change and @change, uses a check to solve the problem

<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)
        }
        // determine whether there Select, if so, obtaining the index of the parent node information 
        IF (checkedNodes.checkedNodes [I] = .children! Null ) { 
          NUM ++ ; 
          a.push (I) 
        } 
      } 
      the console.log ( ' NUM ' ) 
      the console.log (checkedNodes.halfCheckedKeys) 
      the console.log (NUM) 
      the console.log ( ' A ' ) 
      the console.log (A) 
      // If both the half-selected state 
      IF (NUM === 0 ) {
         // all of the half-selected pattern set. 1 
        the this .flag = . 1 
        //The information of the parent node and child nodes param information to the array (the array of background data exchange) 
        the this .PARAM = [] 
        the let _pollutant = {}
         the this .pollutant.projectId = the this .idd
         the this .pollutant.subCateId = checkedNodes.halfCheckedKeys [ checkedNodes.checkedKeys.length- . 1 ]
         the this .pollutant.cateId = checkedNodes.checkedKeys [checkedNodes.checkedKeys.length- . 1 ] 
        Object.assign (_pollutant, the this .pollutant)
         the this .param.push (_pollutant) 
        the console.log ( ' half selected state ' ) 
        the console.log ( the this.PARAM) 
      } 
      // if the selected state are all 
      IF (NUM> 0 && checkedNodes.halfCheckedKeys.length === 0 ) {
         // If the selected state enters a full half-selected, then blanking the array, then the parent All child nodes of the node in the array into the 
        IF ( the this .flag === . 1 )
            the this .PARAM = []
         // if the selected state enters the full mixing, then if all the child nodes of the parent node is added to the array data will be repeated, this time to pay more before the need to remove the 
        IF ( the this .flag === . 3 ) {
           the this .param.splice ( the this .param.length- . 1 , . 1 ) 
        } 
        //Get latest parent node of the parent node and the index of the length of 
        the _ALen = a.length- . 1 ;
         var length = . CheckedNodes.checkedNodes [A [the _ALen]] children.length; 
        the console.log (length) 
        // the parent node of the latest All child nodes in an array 
        for ( var J = 0 ; J <length; J ++ ) { 
        the let _pollutant = {}
         the this .pollutant.projectId = the this .idd
         the this .pollutant.subCateId = checkedNodes.checkedNodes [A [the _ALen]]. ID
         the this .pollutant.cateId = checkedNodes.checkedNodes [A [the _ALen]]. Children [J] .id
        Object.assign (_pollutant, the this .pollutant)
         the this .param.push (_pollutant) 
        } 
        the console.log ( ' Select state ' ) 
        the console.log ( the this .PARAM)
         // current state to Select 2 
        the this .flag = 2 ; 
      } 
      // if both Select and the half-selected 
      IF (NUM> 0 ! && checkedNodes.halfCheckedKeys.length = 0 ) { 
        the console.log (checkedNodes.checkedNodes) 
        the console.log (checkedNodes.halfCheckedNodes) 
        the _ALen = A .length - 1 
        the console.log (A [ the _ALen]) 
        // If operation until all half-select mode or a hybrid mode, then the full array of chosen added 
        if ( the this .flag === . 1 || the this .flag === . 3 ) {
           var length = . checkedNodes.checkedNodes [A [the _ALen]] children.length;
           for ( var J = 0 ; J <length; J ++ ) { 
            the let _pollutant = {}
             the this .pollutant.projectId = the this .idd
             the this .pollutant. = subCateId checkedNodes.checkedNodes [A [the _ALen]]. ID
             the this .pollutant.cateId =checkedNodes.checkedNodes [A [the _ALen]]. Children [J] .id 
            Object.assign (_pollutant, the this .pollutant)
             the this .param.push (_pollutant) 
          } 
        } 
         the console.log ( the this .flag) 
        the console.log ( ' In Flag ' )
         // node after the whole array into selected
         // If operation before all Select, then added to half-selected array 
        IF ( the this .flag === 2 ) { 
          the console.log ( ' CNlen ' )
           var CNlen A = [the _ALen] + checkedNodes.checkedNodes [A [the _ALen]]. children.length + . 1 
          the 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)
          }
        }
        the console.log (' Select All and half-selected ' ) 
        the console.log ( the this .PARAM)
         the this .flag = . 3 
      } 
    },

This function because not enough test data, it is not very mature, follow-up may be updated

PS: There are many console print not deleted, this is just test data, does not affect the results

 

Guess you like

Origin www.cnblogs.com/purple-windbells/p/11285441.html
Recommended