导航菜单 父级高亮 处理

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,从而确定哪些菜单项应该被标记为活动状态。

效果: 父子同时高亮

相关推荐
Eiceblue27 分钟前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762901 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
lzb_kkk3 小时前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
好开心啊没烦恼3 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy
简佐义的博客3 小时前
破解非模式物种GO/KEGG注释难题
开发语言·数据库·后端·oracle·golang
Liudef064 小时前
2048小游戏实现
javascript·css·css3
程序员爱钓鱼4 小时前
【无标题】Go语言中的反射机制 — 元编程技巧与注意事项
开发语言·qt