导航菜单 父级高亮 处理

javascript 复制代码
    // 预处理导航数据
    filterMenuFun (arr, uuids = []) {
      // uuids 用来有级嵌套导航时,子集acitve时父级也有acitve样式
      arr.forEach(item => {
        item.uuids = [item.uuid, ...uuids];
        item.children && this.filterMenuFun(item.children, item.uuids)
      });
      return arr;
    },

让我们逐行解析这个函数:

  1. filterMenuFun (arr, uuids = []) {

    • 定义一个名为filterMenuFun的函数,它接受两个参数:arr(一个数组)和uuids(一个默认为空数组的UUIDs列表)。
  2. arr.forEach(item => {

    • 使用forEach方法遍历arr数组中的每一个item
  3. item.uuids = [item.uuid, ...uuids];

    • itemuuids属性设置为一个数组,其中第一个元素是itemuuid,然后是将uuids数组中的所有元素展开。这实际上是将itemuuid添加到uuids列表的开头。
  4. item.children && this.filterMenuFun(item.children, item.uuids)

    • 检查item是否有children属性。如果有,则递归地调用filterMenuFun函数,处理item.children数组,并将item.uuids作为第二个参数传递。这意味着子级菜单将继承其父级菜单的uuids列表。
  5. });

    • 结束forEach循环。
  6. return arr;

    • 返回处理后的arr数组。
  7. },

    • 结束函数定义。

使用场景:

这个函数可能用于处理一个嵌套的导航菜单数据结构。例如,在一个多级导航菜单中,你可能想要当用户选择某个子菜单项时,不仅使该子菜单项处于活动状态,还使其父级菜单也处于活动状态。通过为每个菜单项添加一个uuids属性,你可以轻松地确定哪些菜单项应该被标记为活动状态。

示例:

假设你有以下数据结构:

复制代码
复制代码
javascript`const navData = [
{
uuid: '1',
name: '菜单1',
children: [
{
uuid: '1-1',
name: '子菜单1-1',
},
{
uuid: '1-2',
name: '子菜单1-2',
children: [
{
uuid: '1-2-1',
name: '子子菜单1-2-1',
}
]
}
]
},
{
uuid: '2',
name: '菜单2',
}
];`

调用filterMenuFun(navData, ['1-2-1'])后,navData将变为:

复制代码
复制代码
javascript`[
{
uuid: '1',
name: '菜单1',
uuids: ['1', '1-2', '1-2-1'],
children: [
{
uuid: '1-1',
name: '子菜单1-1',
uuids: ['1-1'],
},
{
uuid: '1-2',
name: '子菜单1-2',
uuids: ['1-2', '1-2-1'],
children: [
{
uuid: '1-2-1',
name: '子子菜单1-2-1',
uuids: ['1-2-1'],
}
]
}
]
},
{
uuid: '2',
name: '菜单2',
uuids: ['2'],
}
];`

现在,你可以很容易地检查哪个菜单项(或它的任何父级菜单项)的uuids列表包含某个特定的UUID,从而确定哪些菜单项应该被标记为活动状态。

效果: 父子同时高亮

相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
Sylvia-girl4 小时前
Java——抽象类
java·开发语言
Yana.nice6 小时前
Bash函数详解
开发语言·chrome·bash
tomorrow.hello8 小时前
Java并发测试工具
java·开发语言·测试工具
晓13138 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
老胖闲聊8 小时前
Python I/O 库【输入输出】全面详解
开发语言·python
烛阴9 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
她说人狗殊途9 小时前
java.net.InetAddress
java·开发语言
天使day10 小时前
Cursor的使用
java·开发语言·ai
Dxy123931021610 小时前
Python ExcelWriter详解:从基础到高级的完整指南
开发语言·python