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