当前位置: 首页 > 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" )…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

云原生周刊:k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

全面解析数据库:从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

6.9本日总结

一、英语 复习默写list11list18&#xff0c;订正07年第3篇阅读 二、数学 学习线代第一讲&#xff0c;写15讲课后题 三、408 学习计组第二章&#xff0c;写计组习题 四、总结 明天结束线代第一章和计组第二章 五、明日计划 英语&#xff1a;复习l默写sit12list17&#…...