导航菜单 父级高亮 处理

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

效果: 父子同时高亮

相关推荐
CUMT_DJ36 分钟前
matlab计算算法的运行时间
开发语言·算法·matlab
Overboom4 小时前
[C++] --- 常用设计模式
开发语言·c++·设计模式
Univin4 小时前
C++(10.4)
开发语言·数据结构·c++
KyollBM4 小时前
每日羊题 (质数筛 + 数学 | 构造 + 位运算)
开发语言·c++·算法
Paul_09206 小时前
golang面经——map模块和sync.Map模块
开发语言
Univin6 小时前
C++(10.5)
开发语言·c++·算法
haogexiaole6 小时前
Java高并发常见架构、处理方式、api调优
java·开发语言·架构
张人玉6 小时前
C# 通讯关键类的API
开发语言·c#
@大迁世界7 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
froginwe117 小时前
R 数组:深入解析与高效使用
开发语言