1、模拟后端返回的数据结构

  1. var datas = [
  2.       {
  3.         name: '菜单1',
  4.         role: ['超级管理员', '管理员', '普通用户'],
  5.         id: 1000,
  6.         children: [
  7.           {
  8.             name: '菜单1-1',
  9.             role: ['管理员', '普通用户'],
  10.             id: 1001,
  11.             pid: 1000,
  12.             children: [
  13.               {
  14.                 name: '菜单1-1-1',
  15.                 role: ['管理员'],
  16.                 id: 1001001,
  17.                 pid: 1001
  18.               },
  19.               {
  20.                 name: '菜单1-1-2',
  21.                 role: ['超级管理员', '管理员', '普通用户'],
  22.                 id: 1001002,
  23.                 pid: 1001
  24.               }
  25.             ]
  26.           },
  27.           {
  28.             name: '菜单1-2',
  29.             role: ['超级管理员', '普通用户'],
  30.             id: 1002,
  31.             pid: 1000
  32.           }
  33.         ]
  34.       },
  35.       {
  36.         name: '菜单2',
  37.         role: ['超级管理员', '管理员', '普通用户'],
  38.         id: 2000,
  39.         children: [
  40.           {
  41.             name: '菜单2-1',
  42.             role: ['超级管理员', '普通用户'],
  43.             id: 2001,
  44.             pid: 2000
  45.           },
  46.           {
  47.             name: '菜单2-2',
  48.             role: ['超级管理员', '管理员', '普通用户'],
  49.             id: 2002,
  50.             pid: 2000,
  51.             children: [
  52.               {
  53.                 name: '菜单2-2-1',
  54.                 role: ['超级管理员', '普通用户'],
  55.                 id: 2002001,
  56.                 pid: 2002
  57.               },
  58.               {
  59.                 name: '菜单2-2-2',
  60.                 role: ['超级管理员'],
  61.                 id: 2002002,
  62.                 pid: 2002
  63.               }
  64.             ]
  65.           }
  66.         ]
  67.       }
  68.     ]

2、通过递归将所有满足条件的数组项提取出来放入一个数组中

  1. var newArr = []
  2. function getName(datas) {
  3.   for (var i in datas) {
  4.     datas[i].role.forEach((item) => {
  5.       if (item === '普通用户') {
  6.         newArr.push(datas[i])
  7.         if (datas[i].children) {
  8.           getName(datas[i].children)
  9.         }
  10.       }
  11.     })
  12.   }
  13. }
  14. getName(datas)

3、再通过递归将新的数组组合成树形结构

  1. function filterArray(data, pid) {
  2.   var tree = []
  3.   var temp
  4.   for (var i = 0; i < data.length; i++) {
  5.     if (data[i].pid == pid) {
  6.       var obj = data[i]
  7.       temp = filterArray(data, data[i].id)
  8.       if (temp.length > 0) {
  9.         obj.children = temp
  10.       }
  11.       tree.push(obj)
  12.     }
  13.   }
  14.   return tree
  15. }
  16. console.log(filterArray(newArr))