导航菜单 父级高亮 处理

    // 预处理导航数据
    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];

   • 将item的uuids属性设置为一个数组，其中第一个元素是item的uuid，然后是将uuids数组中的所有元素展开。这实际上是将item的uuid添加到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属性，你可以轻松地确定哪些菜单项应该被标记为活动状态。

示例：

假设你有以下数据结构：

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

效果： 父子同时高亮