Tree组件实现子节点的互斥选中
项目中使用Ant Design Vue中的Tree,遇到一个需求,那就是某个节点下的所有叶子节点实现互斥勾选,即勾选了A,再去勾选B的话,自动去掉A,反之,亦然。
如图,需要实现洗发指令和开灯X小时的互斥
代码
<Tree
checkable
:checkStrictly = "checkStrictly"
@expand="onExpand"
:expandedKeys="expandedKeys"
:autoExpandParent="autoExpandParent"
v-model ="checkedKeys"
@select="onSelect"
@check="onCheck"
:selectedKeys="selectedKeys"
:treeData="treeData"
/>
onCheck(checkedKeys,a,b) {
let curCheckId = a.node._props.eventKey
let halfTemp = []
if(a.checked){
//判断是否第一次加载树
if(this.isFirsrtLag){
this.uncheckId = (this.$store.state.buttonsArray.indexOf("2601") == -1) ? "2601" : "2603"
}
let tempArray = checkedKeys
//判断是否选择的是叶子节点
if(curCheckId == '2601' || curCheckId == '2603'){
let oncurCheckId = ""
if(!this.isFirsrtLag){
oncurCheckId = curCheckId == '2601' ? '2603' : '2601'
}else{
oncurCheckId = this.uncheckId == '2601' ? '2603' : '2601'
}
// }
checkedKeys = [].concat(tempArray.filter( item => item != oncurCheckId))
this.uncheckId = oncurCheckId
this.isFirsrtLag = false
}else{
//选择的该叶子节点的父节点或是祖父节点
if(curCheckId == '1067246875800000040' || curCheckId == '1227912572663906305'){
checkedKeys = [].concat(tempArray.filter( item => item != this.uncheckId))
}
}
checkedKeys = [].concat(checkedKeys.filter( item => (item != '1067246875800000040') && (item != '1227912572663906305')))
halfTemp = ["1067246875800000040",'1227912572663906305'];
}
this.checkedKeys = checkedKeys;
this.halfCheckedKeys = halfTemp.concat(a.halfCheckedKeys ? a.halfCheckedKeys : [])
},