扁平数据示例1

  1. var menu_list = [{
  2.       id: '1',
  3.       menu_name: '设置',
  4.       menu_url: 'setting',
  5.       parent_id: 0
  6.     }, {
  7.       id: '1-1',
  8.       menu_name: '权限设置',
  9.       menu_url: 'setting.permission',
  10.       parent_id: '1'
  11.     }, {
  12.       id: '1-1-1',
  13.       menu_name: '用户管理列表',
  14.       menu_url: 'setting.permission.user_list',
  15.       parent_id: '1-1'
  16.     }, {
  17.       id: '1-1-2',
  18.       menu_name: '用户管理新增',
  19.       menu_url: 'setting.permission.user_add',
  20.       parent_id: '1-1'
  21.     }, {
  22.       id: '1-1-3',
  23.       menu_name: '角色管理列表',
  24.       menu_url: 'setting.permission.role_list',
  25.       parent_id: '1-1'
  26.     }, {
  27.       id: '1-2',
  28.       menu_name: '菜单设置',
  29.       menu_url: 'setting.menu',
  30.       parent_id: '1'
  31.     }, {
  32.       id: '1-2-1',
  33.       menu_name: '菜单列表',
  34.       menu_url: 'setting.menu.menu_list',
  35.       parent_id: '1-2'
  36.     }, {
  37.       id: '1-2-2',
  38.       menu_name: '菜单添加',
  39.       menu_url: 'setting.menu.menu_add',
  40.       parent_id: '1-2'
  41.     }, {
  42.       id: '2',
  43.       menu_name: '订单',
  44.       menu_url: 'order',
  45.       parent_id: 0
  46.     }, {
  47.       id: '2-1',
  48.       menu_name: '报单审核',
  49.       menu_url: 'order.orderreview',
  50.       parent_id: '2'
  51.     }, {
  52.       id: '2-2',
  53.       menu_name: '退款管理',
  54.       menu_url: 'order.refundmanagement',
  55.       parent_id: '2'
  56.     }
  57. ]

实现算法 buildTree

  1. /**
  2.  * 将一维的扁平数组转换为多层级对象
  3.  * @param  {[type]} list 一维数组，数组中每一个元素需包含id和parent_id两个属性 
  4.  * @return {[type]} tree 多层级树状结构
  5.  */
  6. function buildTree(list){
  7.     let temp = {};
  8.     let tree = {};
  9.     for(let i in list){
  10.         temp[list[i].id] = list[i];
  11.     }
  12.     for(let i in temp){
  13.         if(temp[i].parent_id) {
  14.             if(!temp[temp[i].parent_id].children) {
  15.                 temp[temp[i].parent_id].children = new Object();
  16.             }
  17.             temp[temp[i].parent_id].children[temp[i].id] = temp[i];
  18.         } else {
  19.             tree[temp[i].id] =  temp[i];
  20.         }
  21.     }
  22.     return tree;
  23. }
  25. 原文：https://blog.csdn.net/qq_37746973/article/details/78662177

实现算法2

  1.   buildTree(list){
  2.       let map = {};
  3.       list.forEach(item => {
  4.         if (!map[item.id]) {
  5.           map[item.id] = item;
  6.         }
  7.       });
  8.       list.forEach(item => {
  9.         if (item.parent_id !== 0) {
  10.           map[item.parent_id].children ? map[item.parent_id].children.push(item) : map[item.parent_id].children = [item];
  11.         }
  12.       });
  13.       return list.filter(item => {
  14.         if (item.parent_id === 0) {
  15.           return item;
  16.         }
  17.       })
  18.     }

扁平数据示例2

  1. const comments = [
  2.   { id: 1, parent_id: null },
  3.   { id: 2, parent_id: 1 },
  4.   { id: 3, parent_id: 1 },
  5.   { id: 4, parent_id: 2 },
  6.   { id: 5, parent_id: 4 }
  7. ];

实现算法

  1. const nest = (items, id = null, link = 'parent_id') =>
  2.   items
  3.     .filter(item => item[link] === id)
  4.     .map(item => ({ ...item, children: nest(items, item.id) }));
  5. const nestedComments = nest(comments); // [{ id: 1, parent_id: null, children: [...] }]
  1. buildTree = (source, id, parentId, children) => {
  2.   let cloneData = JSON.parse(JSON.stringify(source))
  3.   return cloneData.filter(father => {
  4.     let branchArr = cloneData.filter(child => father[id] == child[parentId]);
  5.     branchArr.length > 0 ? father[children] = branchArr : ''
  6.     return father[parentId] == 0        // 如果第一层不是parentId=0，请自行修改
  7.   })
  8. }