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

}

相关推荐
uhakadotcom1 天前
致新人:如何编写自己的第一个VSCode插件,以使用@vscode/vsce来做打包工具为例
前端·面试·github
流***陌1 天前
用工招聘小程序:功能版块与前端设计解析
前端·小程序
russ3851 天前
Vue3.4版本新特性,更优雅的处理组件间的数据双向绑定
vue.js
之恒君1 天前
typescript(tsconfig.json - esModuleInterop)
前端·typescript
夏天19951 天前
React:聊一聊状态管理
前端·javascript·react.js
李剑一1 天前
低代码平台现在为什么不行了?之前为什么行?
前端·面试
鹏多多1 天前
vue的监听属性watch的详解
前端·javascript·vue.js
streaker3031 天前
Vue3 开发态轻量组件文档方案:基于动态路由 + Markdown
vue.js·vite
用户42274481246211 天前
IndexDB 前端数据库
前端
然我1 天前
前端正则面试通关指南:一篇吃透所有核心考点,轻松突围面试
前端·面试·正则表达式