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

}

相关推荐
xiaohe060117 小时前
🔒 JavaScript 不是单线程吗?怎么还能上“锁”?!
javascript·github
摸着石头过河的石头17 小时前
JavaScript继承的多种实现方式详解
前端·javascript
ybb_ymm17 小时前
前端开发之ps基本使用
前端·css
Ashley的成长之路17 小时前
NativeScript-Vue 开发指南:直接使用 Vue构建原生移动应用
前端·javascript·vue.js
衿璃17 小时前
Flutter应用架构设计的思考
前端·flutter
朕的剑还未配妥17 小时前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·vue.js
JNU freshman17 小时前
Element Plus组件
前端·vue.js·vue3
一只专注api接口开发的技术猿17 小时前
容器化与调度:使用 Docker 与 K8s 管理分布式淘宝商品数据采集任务
开发语言·前端·数据库
我有一棵树18 小时前
性能优化之前端与服务端中的 Gzip 压缩全解析
前端
魔术师卡颂18 小时前
不就写提示词?提示词工程为啥是工程?
前端·人工智能·后端