遍历菜单数组,获取选中的子节点的所有父节点元素

  1. 假设有一个数组如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    let menus = [
    {
    key: "menu1",
    label: "一级菜单1",
    icon: "",
    },
    {
    key: "menu2",
    label: "一级菜单2",
    icon: "",
    },
    {
    key: "menu3",
    label: "一级菜单3",
    icon: "",
    children: [
    {
    key: "menu3_1",
    label: "一级菜单3_1",
    icon: "",
    children: [
    {
    key: "menu3_1_1",
    label: "一级菜单3_1_1",
    icon: "",
    },
    ],
    },
    {
    key: "menu3_2",
    label: "一级菜单3_2",
    icon: "",
    },
    ],
    },
    {
    key: "menu4",
    label: "未开发页面演示",
    icon: "",
    },
    ];
  2. 需要获取到选中菜单 menu3_1_1 的所有父元素,即 menu3,menu3_1 和 menu3_1_1,js 代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    /**
    * selectMenus 切换菜单时候触发的事件,参数为更改的菜单 key
    * breadCrumb 选中菜单的所有父元素的数组集
    */
    let breadCrumb = [];
    // 遍历菜单
    function eachMenus(item, name) {
    for (let i = 0, j = item.length; i < j; i++) {
    breadCrumb.push(item[i].label);
    if (item[i].children) {
    eachMenus(item[i].children, name);
    } else {
    if (item[i].key === name) {
    return;
    } else {
    breadCrumb.splice(this.breadCrumb.length - 1, 1);
    }
    }
    }
    breadCrumb.splice(this.breadCrumb.length - 1, 1);
    }

    function selectMenus(name) {
    breadCrumb = [];
    eachMenus(menus, name);
    }