<template>
<el-tree-v2 ref="qualityTree" :default-checked-keys="defaultCheckeys" @check="getCurrentNode" :check-strictly="true"
style="max-width: 600px" :data="data" show-checkbox :props="props" :height="208" />
</template>
<script setup>
const defaultCheckeys = []
const qualityTree = ref(null)
const getKey = (prefix, id) => {
return `${prefix}-${id}`
}
const createData = (
maxDeep,
maxChildren,
minNodesNumber,
deep = 1,
key = 'node',
) => {
let id = 0
return Array.from({ length: minNodesNumber })
.fill(deep)
.map(() => {
const childrenNumber =
deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren)
const nodeKey = getKey(key, ++id)
return {
id: nodeKey,
label: nodeKey,
parent:key==='node'?null:key,
children: childrenNumber
? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
: undefined,
}
})
}
const props = {
value: 'id',
label: 'label',
children: 'children',
}
const data = createData(4, 5, 5)
const getCurrentNode = (currentObj, treeStatus) => {
let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中
console.log('selected',selected)
// 选中
if (selected !== -1) {
// 子节点只要被选中父节点就被选中
selectedParent(currentObj)
// 让子节点全部未选中
uniteChildSame(currentObj, true)
} else {
// 未选中 让子节点全部未选中
if (currentObj.children && currentObj.children.length !== 0) {
uniteChildSame(currentObj, false)
}
}
}
// 统一处理子节点为相同的勾选状态
const uniteChildSame = (currentObj, isSelected) => {
console.log('currentObj',currentObj)
if (currentObj.children == null || currentObj.children.length == 0) {
return;
}
for (var item of currentObj.children) {
qualityTree.value.setChecked(item.id, isSelected)
if(item.children){
uniteChildSame(item,isSelected)
}
}
}
const selectedParent = (currentObj) => {
const currentNode = qualityTree.value.getNode(currentObj);
console.log('currentNode',currentNode)
if (currentNode && currentNode.parent ) {
qualityTree.value.setChecked(currentNode.parent.data.id, true);
selectedParent(currentNode.parent.data.id);
}
}
</script>