当前位置: 首页 > news >正文

vue递归获取树形菜单

文章目录

  • 前言
    • 什么是递归?
  • 一、数据集
  • 二、 递归函数
  • 三、打印树形结构展示


前言

什么是递归?

程序调用自身的编程技巧称为递归( recursion)。
递归 粗略的理解为 循环 ,只不过 递归 是调用自身。
在实际使用中,需要给递归设置一个边界条件,用该边界条件来判断是否继续递归下去。
如果不设置判断条件,将会导致 无限递归 ,也就是 死循环!


请添加图片描述

提示:以下是本篇文章正文内容,下面案例可供参考


一、数据集

直接在setup定义该数组

//数据随便写的,不符合实际情况,因为懒得改const cityList = [{name: "金水区", value: "111",id:'1',pid:null},{name: "管城区", value: "222",id:'1-2',pid:'1'},{name: "惠济区", value: "458",id:'2',pid:null},{name: "二七区", value: "445",id:'2-1',pid:'2'},{name: "新郑市", value: "456",id:'2-2',pid:'2'},{name: "荥阳市", value: "647",id:'2-3',pid:'2'},{name: "巩义市", value: "189",id:'3',pid:null},{name: "经开区", value: "664",id:'3-1',pid:'3'},{name: "郑东区", value: "652",id:'3-2',pid:'3'},{name: "航空港区", value: "732",id:'3-3',pid:'3'},{name: "郑州市", value: "852",id:'3-3-1',pid:'3-3'},];

二、 递归函数

直接在setup定义该函数,然后onMounted钩子自动调用或根据需要手动调用该函数

    function getMenuTree(menuList, pid) {let treeList = [];for (let i = 0; i < menuList.length; i++) {let menu = menuList[i];if (menu.pid === pid) {let tree = {id: menu.id,name: menu.name,children: getMenuTree(menuList, menu.id)};tree.children.length === 0 && delete tree.children;treeList.push(tree);}}return treeList;}

三、打印树形结构展示

在这里插入图片描述

相关文章:

vue递归获取树形菜单

文章目录 前言什么是递归&#xff1f; 一、数据集二、 递归函数三、打印树形结构展示 前言 什么是递归&#xff1f; 程序调用自身的编程技巧称为递归&#xff08; recursion&#xff09;。 递归 粗略的理解为 循环 &#xff0c;只不过 递归 是调用自身。 在实际使用中&#xf…...

[ubuntu]ubuntu22.04默认源和国内源

sudo vi /etc/apt/sources.list 请选择和系统对应的版本&#xff0c;查看系统版本命令&#xff1a; lsb_release -a Distributor ID: Ubuntu Description: Ubuntu 22.04 LTS Release: 22.04 Codename: jammy Ubuntu不同的版本配置的有…...

Map和ForEach的区别,For in和For of的区别

Map和ForEach的区别&#xff1a; 共同点&#xff1a;都可以遍历数组&#xff0c;this指向window&#xff0c;都不会改变原数组。 不同点&#xff1a;map返回一个数组&#xff0c;不会对空数组进行检测&#xff0c;如果是空数组map的话还是返回一个空数组&#xff0c;而空数组…...

json字符串属性名与实体类字段名转换

在项目开发过程中&#xff0c;会遇到实体类字段名与交互的json对象属性名不一致的情况&#xff0c;比如前段使用的是下划线方式定义&#xff0c;后端采用的是驼峰式定义&#xff0c;其他系统使用t表示一个时间戳&#xff0c;自己的系统使用timestamp定义。遇到这种情况&#xf…...

Vue Vuex模块化编码

正常写vuex的index的时候如果数据太多很麻烦&#xff0c;如有的模块是管理用户信息或修改课程等这两个是不同一个种类的&#xff0c;如果代码太多会造成混乱&#xff0c;这时候可以使用模块化管理 原始写法 如果功能模块太多很乱 import Vue from vue import Vuex from vuex …...

消费者忠诚度研究:群狼调研帮您制定忠诚客户计划

在当今竞争激烈的市场环境中&#xff0c;消费者忠诚度对于企业的成功至关重要。消费者忠诚度不仅关系到企业的市场份额和盈利能力&#xff0c;还直接影响着企业的品牌形象和声誉。群狼调研作为一家专业的市场研究机构&#xff0c;专注于消费者忠诚度研究&#xff0c;为企业提供…...

接口幂等性详解

1. 什么是幂等性 幂等性指的是对同一个操作的多次执行所产生的影响与一次执行的影响相同。无论操作执行多少次&#xff0c;系统状态都应该保持一致。 在计算机科学和网络领域中&#xff0c;幂等性通常用来描述服务或操作的特性。对于RESTful API或HTTP方法&#xff0c;一个幂…...

Java操作redis常见类型数据存储

一&#xff0c;Java连接Redis 1.1 导入依赖 打开IDEA在pom.xml导入依赖 注意&#xff1a;要在dependencies标签中导入 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.9.0</version> &…...

【深度学习】pytorch——Autograd

笔记为自我总结整理的学习笔记&#xff0c;若有错误欢迎指出哟~ 深度学习专栏链接&#xff1a; http://t.csdnimg.cn/dscW7 pytorch——Autograd Autograd简介requires_grad计算图没有梯度追踪的张量ensor.data 、tensor.detach()非叶子节点的梯度计算图特点总结 利用Autograd实…...

【ARM 安全系列介绍 1 -- 奇偶校验与海明码校验详细介绍】

文章目录 奇偶校验介绍奇偶校验 python 实现奇偶校验C代码实现 海明码详细介绍 奇偶校验介绍 奇偶校验是一种错误检测方法&#xff0c;广泛应用于计算机内部以及数据通信领域。其基本原理是为了使得一组数据&#xff08;通常是一字节8位&#xff09;中的“1”的个数为偶数或奇…...

分享34个发布商会PPT,总有一款适合您

分享34个发布商会PPT&#xff0c;总有一款适合您 链接&#xff1a;https://pan.baidu.com/s/1jP9toqTZONWeDIcxvw1wxg?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不易。知识付费甚…...

047_第三代软件开发-日志分离

第三代软件开发-日志分离 文章目录 第三代软件开发-日志分离项目介绍日志分离用法 关键字&#xff1a; Qt、 Qml、 log、 日志、 分离 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Object Language&#xff09;和 C 的强…...

ChinaSoft 论坛巡礼 | 系统与网络安全论坛

2023年CCF中国软件大会&#xff08;CCF ChinaSoft 2023&#xff09;由CCF主办&#xff0c;CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办&#xff0c;将于2023年12月1-3日在上海国际会议中心举行。 本次大会主题是“智能化软件创新推动数字经济与社…...

Ubuntu Gitlab安javascript:void(‘numberedlist‘)装

原因&#xff1a; 代码越改越多&#xff0c;越难维护&#xff0c;开发代码和发布代码融为一体&#xff1b;2人以上开发&#xff0c;都会修改代码&#xff0c;修改次数一多&#xff0c;代码难以维护 其中&#xff1a;前往Gitlab官网&#xff1a;gitlab/gitlab-ce - Packages pa…...

11.4-GPT4AllTools版本已开始对小部分GPT3.5用户内测推送

OpenAI已经开始小规模推送GPT4 AllTools功能&#xff0c;部分GPT博主已经第一时间体验了此功能&#xff0c;此功能特色是整合目前的多模态功能以及文件上传和联网模块&#xff0c;无需切换&#xff0c;更要全面综合 可上传包括 PDF、数据文件在内的任意文档&#xff0c;并进行分…...

竞赛选题 深度学习手势检测与识别算法 - opencv python

文章目录 0 前言1 实现效果2 技术原理2.1 手部检测2.1.1 基于肤色空间的手势检测方法2.1.2 基于运动的手势检测方法2.1.3 基于边缘的手势检测方法2.1.4 基于模板的手势检测方法2.1.5 基于机器学习的手势检测方法 3 手部识别3.1 SSD网络3.2 数据集3.3 最终改进的网络结构 4 最后…...

语言模型AI——聊聊GPT使用情形与影响

GPT的出现象征着人工智能自然语言处理技术的一次巨大飞跃。从编程助手到写作利器&#xff0c;它的身影在各个行业中越来越常见。百度【文心一言】、CSDN【C知道】等基于GPT的产品相继推出&#xff0c;让我们看到了其广泛的应用前景。然而&#xff0c;随着GPT的普及&#xff0c;…...

浅谈事件冒泡和事件捕获

事件冒泡和事件捕获分别由微软和网景公司提出&#xff0c;这两个概念都是为了解决页面中事件流&#xff08;事件发生顺序&#xff09;的问题。 <div id"div1"><div id"div2"><div id"div3">click</div></div> <…...

CSS 背景、文本、字体

CSS背景&#xff1a; CSS背景属性用于定义HTML元素的背景。CSS属性定义背景效果&#xff1a;background-color&#xff1b;background-image&#xff1b;background-repeat&#xff1b;background-attachment&#xff1b;background-position。 background-color属性定义元素…...

爬取Elastic Stack采集的Nginx内容

以下是一个简单的Go语言爬虫程序&#xff0c;用于爬取Elastic Stack采集的Nginx内容。请注意&#xff0c;这只是一个基本的示例&#xff0c;实际使用时可能需要根据具体情况进行修改和扩展。 package mainimport ("fmt""net/http""io/ioutil" )…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...