之前做得需求一直是下拉框,但是对于树级的复选框没有实际用过,在这里记录一下
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:有很多控制台打印没有删除,这个只是测试数据,不影响结果
原文:https://www.cnblogs.com/purple-windbells/p/11285441.html