el-tree检查当前节点是否是传入节点的父级或祖先节点

实现的效果就是:树形结构选中一个目录后点击收起的时候需要知道当前收起的是不是选中目录的父节点或者是祖先节点

这就用到了递归,什么是递归呢?简单来说递归就是方法自己调用自己,每次调用时传入不同的变量。一直到程序执行到指定的出口时停止调用本身,并将结果层层返回。

不多说,请看代码

复制代码
<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

}

相关推荐
会豪2 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子2 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶2 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子2 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_2 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark2 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23332 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin2 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_3 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit3 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言