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

1.问题

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

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

可以看到每层菜单的path都只有当前的路径,没有进行全拼接。

那么此时点击一级菜单就会有问题:

2.解决

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

js 复制代码
/**
 * @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;
};
相关推荐
zzzzzz31015 小时前
别急着把动效组件搬进页面:从 react-bits 看 React 动效库该怎么评估
前端·react.js·开源
研☆香1 天前
聊一聊前端的常见字 关键字
开发语言·前端·javascript
日光倾1 天前
TypeScript 随手记 —— 1
前端·javascript·typescript
Buke..1 天前
【APP 逆向】哔哩哔哩 sign 参数逆向(下):OLLVM 混淆还原 sign 算法
java·javascript·爬虫·python·算法
前端炒粉1 天前
长会话虚拟滚动与渲染优化
前端·javascript·vue.js
谙忆10241 天前
图片裁剪总是跑偏?用 object-fit、object-position 和真实像素把坐标对齐
javascript·css·图像识别
花归去1 天前
ant的a-table更改表格的高度
前端·javascript·html
sibylyue1 天前
基于 Vben Admin 框架的 Vue 3 前端项目配置文件及常用命令
前端·javascript·vue.js
BreezeJiang1 天前
学 App Router,真正该串起来的是路由、数据和失败分支
react.js
AC赳赳老秦1 天前
多源数据关联挖掘:OpenClaw 打通工商、招投标、专利公开数据,挖掘企业业务关联关系
java·c语言·javascript·c++·python·deepseek·openclaw