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

}

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止8 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python