elementui的树形控件有个check-strictly属性(在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false),也许是太过智能了
有如下现象及问题:
1、当你通过函数设置勾选节点的时候,只要父节点被勾选子节点必会勾选上,即便设置勾选的list中无此子节点。
2、当你点击勾选复选框时候,若点击父节点,其下子节点全部统一跟随父节点变化;若点击子节点,子节点部分勾选时父节点处于半选状态,子节点全部勾选时父节点选中,子节点全部不勾选时父节点未选中。
设置true,严格的遵循父子不互相关联。
1、当你通过函数设置勾选节点的时候,严格通过设置勾选的list中有无此节点来断定是否勾选。
2、当你点击勾选复选框时候,无论点击的哪个节点只会改变当前节点的勾选状态,不存在半选状态。
解决办法就是改为不互相关联,然后手动控制父级选择后的处理
<div class="vab-tree-border">
<el-tree
ref="treeRef"
default-expand-all
:props="props"
:data="list"
node-key="ID"
show-checkbox
@check="orgCheck"
:check-strictly="true"
>
<template #default="{ data }">
<span>{{ data.Name }}</span>
</template>
</el-tree>
</div>
// vue3写法 ID为你树形数据中当做唯一标识的属性名,Children为下一级集合的属性名
const setChildreChecked = (node, isChecked) => {
node.forEach((item) => {
state.treeRef.setChecked(item.ID, isChecked)
if (item.Children && item.Children.length > 0) {
state.treeRef.setChecked(item.ID, isChecked)
setChildreChecked(item.Children, isChecked)
} else {
state.treeRef.setChecked(item.ID, isChecked)
}
})
}
const hanleCheck = (data, node) => {
const isCheckeds = state.treeRef.getNode(data).checked
if (isCheckeds) {
// 判断该节点是否有下级节点,如果有那么遍历设置下级节点为选中
data.Children &&
data.Children.length > 0 &&
setChildreChecked(data.Children, true)
} else {
// 如果节点取消选中,则取消该节点下的子节点选中
data.Children &&
data.Children.length > 0 &&
setChildreChecked(data.Children, false)
}
}
const orgCheck = (data, node) => {
hanleCheck(data, node)
}
orgCheck(data,node) {//系统权限树操作(多个树同时存在可用名称区别)
this.hanleCheck(data,node,'orgTree');
},
hanleCheck(data,node,treeName){
const _this = this
// 获取当前节点是否被选中
const isChecked = this.$refs[treeName].getNode(data).checked
// 如果当前节点被选中,则遍历下级子节点并选中,如果当前节点取消选中,则遍历下级节点并取消选中
if(isChecked){
// 判断该节点是否有下级节点,如果有那么遍历设置下级节点为选中
data.childrenList && data.childrenList.length>0 && setChildreChecked(data.childrenList,true)
}else{
// 如果节点取消选中,则取消该节点下的子节点选中
data.childrenList && data.childrenList.length>0 && setChildreChecked(data.childrenList,false)
}
function setChildreChecked(node,isChecked){
node.forEach(item => {
data.childrenList && item.childrenList.length>0 && setChildreChecked(item.childrenList,isChecked)
_this.$refs[treeName].setChecked(item.id,isChecked)
})
}
}