实现的效果就是：树形结构选中一个目录后点击收起的时候需要知道当前收起的是不是选中目录的父节点或者是祖先节点
这就用到了递归，什么是递归呢？简单来说递归就是方法自己调用自己，每次调用时传入不同的变量。一直到程序执行到指定的出口时停止调用本身，并将结果层层返回。
不多说，请看代码
<template>
<el-tree ref="treeRef" :data="data" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
setup() {
const state = reactive({
selectedId: '',
data: [],
selectData:[]
})
const handleNodeClick = (data, node) => {
if (!data.children) {
state.selectedId = data.id;
state.selectData = data;
} else {
if (state.selectedId && node.expanded) {
treeRef.value.setCurrentKey(state.selectedId);
} else if (state.selectedId && !node.expanded) {
console.log("收起----",state.selectData);
const isParent = isParent(state.selectData, data);
if (!isParent) {
// console.log("当前节点不是他的父级或祖先");
treeRef.value.setCurrentKey(state.selectedId);
} else {
// console.log("当前节点是他的父级或祖先");
}
}
}
};
//检查当前节点是否是传入节点的父级或祖先节点
const isParent = (node, potential) => {
if (!node || !potential) return false;
// 如果相同为同级目录，不是父节点或祖先节点
if (node.parentId === potential.parentId) return false;
// 如果当前节点的父节点等于待检查节点则为父节点
let nodeParentId = treeRef.value.getNode(node.id)?.parent.data.id;
if (nodeParentId === potential.id) return true;
// 递归检查父节点
return isParentOrAncestor(
treeRef.value.getNode(node.id)?.parent.data,
potential
);
};
return {
handleNodeClick,
isParent
}
}
}
</script>数据的大致结构
{
children: [{id: 111, parentId: 1, name: "目录a",},{id: 222, parentId: 1, name: "目录b",}...]
id: 1
name:目录s
},
{
children: [{id: 333, parentId: 2, name: "目录c",},{id: 444, parentId: 2, name: "目录d",}...]
id: 2
name:目录n
}