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

}

相关推荐
灵感__idea5 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡6 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo6 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel6 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld6 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel6 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi7 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端
weixin_456904278 小时前
C# 中的回调函数
java·前端·c#
kura_tsuki8 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构
yinuo8 小时前
UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决
前端