js递归创建多级菜单树

js实现多级菜单树

使用了递归实现

let menu_list = [{
  id: '1',
  menu_name: '设置',
  menu_url: 'setting',
  parent_id: '0'
}, {
  id: '1-1',
  menu_name: '权限设置',
  menu_url: 'setting.permission',
  parent_id: '1'
}, {
  id: '1-1-1',
  menu_name: '用户管理列表',
  menu_url: 'setting.permission.user_list',
  parent_id: '1-1'
}, {
  id: '1-1-2',
  menu_name: '用户管理新增',
  menu_url: 'setting.permission.user_add',
  parent_id: '1-1'
}, {
  id: '1-1-3',
  menu_name: '角色管理列表',
  menu_url: 'setting.permission.role_list',
  parent_id: '1-1'
}, {
  id: '1-2',
  menu_name: '菜单设置',
  menu_url: 'setting.menu',
  parent_id: '1'
}, {
  id: '1-2-1',
  menu_name: '菜单列表',
  menu_url: 'setting.menu.menu_list',
  parent_id: '1-2'
}, {
  id: '1-2-2',
  menu_name: '菜单添加',
  menu_url: 'setting.menu.menu_add',
  parent_id: '1-2'
}, {
  id: '2',
  menu_name: '订单',
  menu_url: 'order',
  parent_id: '0'
}, {
  id: '2-1',
  menu_name: '报单审核',
  menu_url: 'order.orderreview',
  parent_id: '2'
}, {
  id: '2-2',
  menu_name: '退款管理',
  menu_url: 'order.refundmanagement',
  parent_id: '2'
}
];
let result = [];
const createTree = (list) => {
  // 遍历菜单列表，查找根节点并将子节点添加到children属性上
  menu_list.forEach(item => {
    if (item.parent_id === '0') {
      item.children = getChildren(list, item.id);
      result.push(item);
    }
  })
}
// 递归获取子节点
const getChildren = (list, pid) => {
  return list.filter(item => {
    if (item.parent_id === pid) {
      item.children = getChildren(list, item.id)
      return true;
    }
    return false;
  })
}
createTree(menu_list);
console.log(result);

输出：

[
    {
        "id": "1",
        "menu_name": "设置",
        "menu_url": "setting",
        "parent_id": "0",
        "children": [
            {
                "id": "1-1",
                "menu_name": "权限设置",
                "menu_url": "setting.permission",
                "parent_id": "1",
                "children": [
                    {
                        "id": "1-1-1",
                        "menu_name": "用户管理列表",
                        "menu_url": "setting.permission.user_list",
                        "parent_id": "1-1",
                        "children": []
                    },
                    {
                        "id": "1-1-2",
                        "menu_name": "用户管理新增",
                        "menu_url": "setting.permission.user_add",
                        "parent_id": "1-1",
                        "children": []
                    },
                    {
                        "id": "1-1-3",
                        "menu_name": "角色管理列表",
                        "menu_url": "setting.permission.role_list",
                        "parent_id": "1-1",
                        "children": []
                    }
                ]
            },
            {
                "id": "1-2",
                "menu_name": "菜单设置",
                "menu_url": "setting.menu",
                "parent_id": "1",
                "children": [
                    {
                        "id": "1-2-1",
                        "menu_name": "菜单列表",
                        "menu_url": "setting.menu.menu_list",
                        "parent_id": "1-2",
                        "children": []
                    },
                    {
                        "id": "1-2-2",
                        "menu_name": "菜单添加",
                        "menu_url": "setting.menu.menu_add",
                        "parent_id": "1-2",
                        "children": []
                    }
                ]
            }
        ]
    },
    {
        "id": "2",
        "menu_name": "订单",
        "menu_url": "order",
        "parent_id": "0",
        "children": [
            {
                "id": "2-1",
                "menu_name": "报单审核",
                "menu_url": "order.orderreview",
                "parent_id": "2",
                "children": []
            },
            {
                "id": "2-2",
                "menu_name": "退款管理",
                "menu_url": "order.refundmanagement",
                "parent_id": "2",
                "children": []
            }
        ]
    }
]