react ant ice3 实现点击一级菜单自动打开它下面最深的第一个子菜单

news2024/12/23 8:15:01

1.问题

默认的如果没有你的菜单结构是这样的:

[
	{
	children: [
		{
			name: "通用配置"
			parentId: "1744857774620672"
			path: "basic"
		}
	],
	name: "系统管理"
	parentId: "-1"
	path: "system"
	}
]

可以看到每层菜单的path都只有当前的路径,没有进行全拼接。
那么此时点击一级菜单就会有问题:
在这里插入图片描述

2.解决

让一级菜单进行全拼接,二三级等子菜单不做处理,仍然保持当前的path,也就是点击一级菜单自动打开它下面最深的第一个子菜单。

/**
 * @description: 递归 设置一个父亲菜单完整的菜单路径,
 * 例如:[{path:home,children;[{path:console}]}]
 * 得到:[{path:home/console,children;[{path:console}]}]
 * @param menuData 递归的对象
 * @param parentPath 父路径
 * @returns 替换后的对象
 */
export const setParentPaths = (data) => {
  if (data.length === 0) return;
  data.forEach((i) => {
    const concatPaths = (item, parentPath = "") => {
      const currentPath = parentPath + "/" + (item.path || item.fullPath);

      if (item.children && item.children.length > 0) {
        item.fullPath = concatPaths(item.children[0], currentPath);
      } else {
        item.fullPath = currentPath;
      }

      return item.fullPath;
    };

    concatPaths(i);
  });

  return data;
};

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1003553.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

期权投资的优势有哪些方面?

随着金融市场的不断演变,越来越多的金融衍生品出现在人们的视线中,特别是上证50ETF期权可以做空T0的交易模式吸引了越来越多的朋友,那么期权投资的优势有哪些方面? 期权是投资市场中一个非常重要的投资方式,期权投资能…

SOLIDWORKS装配体如何使用全局变量

客户痛点:随着人力资源价格的增长,设计的时间需要减少时间,提高设计效率。 数据问题:以前单个数据都需要建立单独的数据结构,装配体的模型都要重新建立。 需要解决的问题:能够快速地完成3D模型及装配体的…

TensorFlow 03(Keras)

一、tf.keras tf.keras是TensorFlow 2.0的高阶API接口,为TensorFlow的代码提供了新的风格和设计模式,大大提升了TF代码的简洁性和复用性,官方也推荐使用tf.keras来进行模型设计和开发。 1.1 tf.keras中常用模块 如下表所示: 1.2 常用方法 …

机器学习——协同过滤算法(CF)

机器学习——协同过滤算法(CF) 文章目录 前言一、基于用户的协同过滤1.1. 原理1.2. 算法步骤1.3. 代码实现 二、基于物品的协同过滤2.1. 原理2.2. 算法步骤2.3. 代码实现 三、比较与总结四、实例解析总结 前言 协同过滤算法是一种常用的推荐系统算法&am…

清理 Ubuntu 系统的 4 个简单步骤

清理 Ubuntu 系统的 4 个简单步骤 现在,试试看这 4 个简单的步骤,来清理你的 Ubuntu 系统吧。 这份精简指南将告诉你如何清理 Ubuntu 系统以及如何释放一些磁盘空间。 如果你的 Ubuntu 系统已经运行了至少一年,尽管系统是最新的,…

2003-2022年黄河流域TCI、VCI、VHI、TVDI逐年1km分辨率数据集

摘要 黄河流域大部分属于干旱、半干旱气候,先天水资源条件不足,是中国各大流域中受干旱影响最为严重的流域。随着全球环境和气候变化,黄河流域的干旱愈加频繁,对黄河流域的干旱监测研究已经成为当下的热点。本数据集基于MODIS植被和地表温度产品,通过对逐年数据进行去云、…

Mendix使用Upload image新增修改账户头像

学习Mendix中级文档,其中有个管理我的账号功能,确保账号主任可以修改其头像,接下来记录如何实现账户头像的上传和修改。根据文档的步骤实现功能~~ 新建GeneralExtentions模块,给GeneralExtentions添加两个模…

MapTR v2文章研读

MapTR v2论文来了,本文仅介绍v2相较于v1有什么改进之处,如果想了解v1版本的论文细节,可见链接。 相较于maptr,maptr v2改进之处: 在分层query机制中引进解耦自注意力机制,有效降低了内存消耗;…

Spring中如何解决循环依赖问题

一、什么是循环依赖 循环依赖也叫循环引用,是指bean之间形成相互依赖的关系,由此,bean对象在属性注入时便会产生循环。这种循环依赖会导致编译器无法编译代码,从而无法运行程序。为了避免循环依赖,我们在开发过程中需…

视频号视频下载工具有那些?我们怎么下载视频号里面的视频

本篇文章给大家谈谈视频号视频下载工具,以及视频号视频如何下载?对应的知识点,希望对各位有所帮助。 视频号里面的视频可以下载吗? 视频号官方首先是不提供下载功能的,但是很多第三方可以提供视频号的视频下载功能。 早期版本视…

【力扣每日一题】2023.9.12 课程表Ⅳ

目录 题目: 示例: 分析: 代码: 题目: 示例: 分析: 今天是课程表系列题目的最后一题,因为我在题库里找不到课程表5了,所以今天的每日一题就是最后一个课程表了。 题…

小节5:Python列表list常用操作

1、对列表的基本认知: 列表list,是可变类型。比如,append()函数会直接改变列表本身,往列表里卖弄添加元素。所以,list_a list_a.append(123)就是错误的。如果想删除列表中的元素,可以用remove()函数&…

基于微信小程序的宠物寄养平台,附源码、数据库

1. 简介 本文正是基于微信小程序开发平台,针对宠物寄养的需求,本文设计出一个包含寄养家庭分类、寄养服务管理、宠物档案、交流论坛的微信小程序,以此帮助宠物寄养的实现,促进宠物寄养工作的进展。 2 开发技术 微信小程序的运行环境分为渲染层和逻辑层&#xff0…

仿照Everything实现的文件搜索工具--SearchEverything

一、项目介绍 项目名称:SearchEverything 项目简介:SearchEverything是仿照Everything实现的一款桌面级的文件搜索软件,它是Everything的增强版,支持跨平台的使用。 项目功能: 1.选择文件夹后,多线程扫描文件夹下的…

学会这个技能,写字楼立马高级起来!

在当今现代化社会中,写字楼已成为商业和行政活动的中心。成千上万的人们每天涌入这些高楼大厦,从事各种各样的工作,以实现公司和组织的目标。然而,与这种繁忙的办公环境一样,也带来了一系列的安全挑战和管理难题。 随着…

【大数据之Kafka】十一、Kafka消费者及消费者组案例

1 独立消费者案例(订阅主题) (1)需求:创建一个独立消费者,消费 first 主题中数据。 (2)分析: 注意:在消费者 API 代码中必须配置消费者组 id。命令行启动消…

算法通关村第13关【青铜】| 数字与数学基础问题

数字统计专题 1.数组元素积的符号 思路&#xff1a;每回碰到负数就取反 class Solution {public int arraySign(int[] nums) {int res nums[0];if(nums[0]>0){res 1;}else if(nums[0]<0){res -1;}else{return res;}for(int i 1;i<nums.length;i){if(nums[i]<…

Linux基本认识

一、Linux基本概念 Linux 内核最初只是由芬兰人林纳斯托瓦兹&#xff08;Linus Torvalds&#xff09;在赫尔辛基大学上学时出于个人爱好而编写的。 Linux 是一套免费使用和自由传播的类 Unix 操作系统&#xff0c;是一个基于 POSIX 和 UNIX 的多用户、多任务、支持多线程和多…

地下管网实时水位监测用什么设备好?

地下排水管网是城市重要基础设施生命线之一&#xff0c;主要用于排放雨水、地表水和废水&#xff0c;以维护城市的安全运行。然而&#xff0c;在极端天气事件发生时&#xff0c;排水系统可能会面临压力巨大&#xff0c;导致排水不畅引发城市内涝。通过对管网水位实时监测&#…

Java集合大总结——Collection集合

Collection集合的整理 1、List&#xff0c;Set&#xff0c;Queue&#xff0c;Map四者的区别集合底层数据结构梳理2、关于集合的的选用2.1 为什么使用集合3、List接口3.1 ArrayList 和 Array&#xff08;数组&#xff09;的区别&#xff1f;3.1 LinkedList 为什么不能实现Random…