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

南城夏季2023-09-18 21:47

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;
};