最近有个需求,树结构选项,如果有已勾选节点了,后续只能勾选同一层级节点数据。
感觉可以记录下。
实现思路:
1.同一层级的上一节点(父节点)肯定是相同的。所以判断当前勾选的节点的父节点是否相同
2.如果没有已选节点则可以随意勾选节点
orgNodeChange(node,check,childCheck){
this.selectOrgList = [];
this.charForm.orgIds = [];
let checkedArr = this.$refs.orgTreeRef.getCheckedNodes();
let checkedKeys = this.$refs.orgTreeRef.getCheckedKeys();
if(check){
if(checkedArr.length>1){
for(let i=0;i<checkedArr.length;i++){
/*
在已选节点中(包含最后次勾选不在原先同层节点的数据)判断当前勾选的节点是否跟原先的节点同层
*/
if(node.dataId != checkedArr[i].dataId){
this.lastTreeParentId = checkedArr[i].parentId;
}
}
if(node.parentId != this.lastTreeParentId){
this.$message.warning("选择的节点不在同一层级请重新选择");
//移除已选中的并且不在同一层的节点
this.$refs.orgTreeRef.setChecked(node.dataId,false,false);
return;
}else{
this.selectOrgList = this.$refs.orgTreeRef.getCheckedNodes();
this.charForm.orgIds = this.$refs.orgTreeRef.getCheckedKeys();
}
}else{
this.selectOrgList = this.$refs.orgTreeRef.getCheckedNodes();
this.charForm.orgIds = this.$refs.orgTreeRef.getCheckedKeys();
}
}else{
if(checkedArr.length == 0){
this.lastTreeParentId = null;
}else{
this.selectOrgList = this.$refs.orgTreeRef.getCheckedNodes();
this.charForm.orgIds = this.$refs.orgTreeRef.getCheckedKeys();
}
}
},
1.每次勾选节点时,都先获取已勾选的
node / key
。然后判断是否是勾选操作,进行同父id进行对比,这里的代码其实可以直接简化取
checkedArr
数组里第一个下标值就好了并记录父节点id。
2.判断当前勾选节点的父节点是否跟先前有已勾选的相同。
3.是相同的话重新获取过已勾选的
node / key
的方法
4.已选数组里为空则说明未存在已勾选节点,同样重新获取过树的获取节点方法
5. 判断为取消勾选时,如果树已经不存在勾选节点了,则把记录id的值设置null