......

data: () => ({
  // 数据
dt: [{
id: '1',
children: [
{
id: '1-1',
children: [
{
id: '1-1-1',
children: []
}
]
},
{
id: '1-2',
children: [
{
id: '1-2-1',
children: []
}
]
}
]
}, {
id: '2',
children: [
{
id: '2-1',
children: [
{
id: '2-1-1',
children: [{ id: '2-1-1-1', children: [] }]
}
]
}
]
}],
path: [],// 保存递归到的每一层路径
curPath: [], // 当前路径
curId: '2-1-1', // 目标节点
isRecursion: true // 是否已找到目标几点
}),
methods: {
handleTestClick () {
const { dt } = this
this.path = []
dt.forEach((item, index) => {
this.path[index] = [item.id] // 将每一层的路径保存下来
this.recursion(item.children, index)
}) console.log(this.path, this.curPath)
},
recursion (ary, index) {
for (let i = 0; i < ary.length; i++) {
const item = ary[i]
this.isRecursion && this.path[index].push(item.id) // 将父节点id添加到当前层路径
if (this.curId === ary[i].id) {
this.curPath = this.path[index] // index层的路径就是目标节点的路径
this.isRecursion = false
break
}
if (item.children && item.children.length && this.isRecursion) {
this.recursion(item.children, index)
}
}
}
}

......

  -- 经过地狱般的磨练,创造出天堂的力量。流过血的手指,弹出世间的绝唱!--

个人博客对应地址:http://www.devloper.top/article/detail/c8a20870-3329-11eb-8d80-e5b0e11d80e6

JavaScript之递归查找所有父节点的更多相关文章

  1. sql 递归显示所有父节点

    1.我先建两个表 一个表示项目及级别 另一个表示项目最后一级中包含内容.两个表的数据如图 CREATE TABLE [dbo].[yq_Project]( ,) primary key, ) NOT ...

  2. mysql 递归查找所有子节点

    select dept_id from ( select t1.dept_id,t1.parent_id, if(find_in_set(parent_id, @pids) > 0, @pids ...

  3. SQL 递归树 子父节点相互查询

    if object_id('[tb]') is not null drop table [tb] go create table [tb]([modeid] int,modename varchar( ...

  4. 转载:SQL 递归树 子父节点相互查询

    if object_id('[tb]') is not null drop table [tb] go create table [tb]([modeid] int,modename varchar( ...

  5. Mysql 实现 向上递归查找父节点并返回树结构

    需求:通过mysql 8.0以下版本实现,一个人多角色id,一个角色对应某个节点menu_id,根节点的父节点存储为NULL, 向上递归查找父节点并返回树结构. 如果只有叶子,剔除掉; 如果只有根,只 ...

  6. T-Sql 递归查询(给定节点查所有父节点、所有子节点的方法)

    -- 查找所有父节点with tab as( select Type_Id,ParentId,Type_Name from Sys_ParamType_V2_0 where Type_Id=316-- ...

  7. SQL 递归查询(根据指定的节点向上获取所有父节点,向下获取所有子节点)

    --------------------01.向上查找所有父节点-----------------WITH TEMP AS (SELECT * FROM CO_Department WHERE ID= ...

  8. [SQL]T-Sql 递归查询(给定节点查所有父节点、所有子节点的方法)

    T-Sql 递归查询(给定节点查所有父节点.所有子节点的方法)   -- 查找所有父节点with tab as( select Type_Id,ParentId,Type_Name from Sys_ ...

  9. JavaScript通过父节点ID递归生成JSON树

    JavaScript通过父节点ID递归生成JSON树: · 实现思路:通过递归实现(第一次递归的时候查询出所有的父节点,然后通过当前父节点id不断地去查询所有子节点,直到递归完毕返回)   · 代码示 ...

随机推荐

  1. 如何让 Spring Security 「少管闲事」

    记两种让 Spring Security「少管闲事」的方法. 遇到问题 一个应用对外提供 Rest 接口,接口的访问认证通过 Spring Security OAuth2 控制,token 形式为 J ...

  2. 「实用」打造自我感觉非常漂亮的Mac终端

    背景 (今天我是一个美妆博主) 突然发现自己使用的iterm2终端样式有些朴素,为了让她看起来花枝招展的,我决定给她打扮打扮.毕竟每天面对她的时间比对象还多-- 效果对比 因为每个人的喜好都不一样,所 ...

  3. XSLT映射文件函数

    任何的编程语言或者是SQL语句都有内置的函数或方法,而强大灵活的xslt技术也是如此.熟练掌握XSLT的常用函数的用法,XSLT的应用将变得如此轻松,你会发现XSLT比想象中还要牛!以下是xslt数值 ...

  4. 【jvm】05-为什么你写的代码有时候和预期不一致

    [jvm]05-为什么你写的代码有时候和预期不一致 欢迎关注b站账号/公众号[六边形战士夏宁],一个要把各项指标拉满的男人.该文章已在github目录收录. 屏幕前的大帅比和大漂亮如果有帮助到你的话请 ...

  5. 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式

    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...

  6. VUE的学习_从入门到放弃(一)

    一.vue的功能及作用 工作方式如下 1.不用操作DOM 2.单页面应用web项目 简称:SPA 3.当下各种新框架都采用的类似Vue或者类似React的语法去作为主语法,微信小程序/MpVue... ...

  7. springboot的build.gradle增加阿里仓库地址以及eclipse增加lombok

    该随笔仅限自己记录,请谨慎参考!! 为什么把这2块内容放一个标题里? 发现lombok和eclipse结合的一些问题 关于lombok如何与eclipse结合,网上应该有很多教程,我这块已经做过了,但 ...

  8. Notepad++在线安装使用JSON插件

    1.介绍 JSON Viewer是Notepad++的JSON插件, Notepad++的Plugins Admin可以安装管理插件, 它不仅可以格式化JSON字符串, 还可以打开JSON查看器查看结 ...

  9. C# UTF8的BOM导致XML序列化与反序列化报错:Data at the root level is invalid. Line 1, position 1.

    最近在写一个xml序列化及反序列化实现时碰到个问题,大致类似下面的代码: class Program { static void Main1(string[] args) { var test = n ...

  10. STM32F3 GPIO的八种模式及工作原理

    一.GPIO简介 GPIO(英语:General-purpose input/output),通用型之输入输出的简称,简单来说就是STM32可控制的引脚,STM32芯片的GPIO引脚与外部设备连接起来 ...