对象数组转为树形结构

第一种方式: 

/**
 * 树形数据转换
 * @param {*} data list数据
 * @param {*} id 主键ID
 * @param {*} pid 上级ID
 * @param childrenKey 子list数据的key
 */
function treeDataTranslate (data, id = 'id', pid = 'parentId', childrenKey = 'children') {
  let res = []
  let temp = {}
  for (let i = 0; i < data.length; i++) {
    temp[data[i][id]] = data[i]
  }
  for (let k = 0; k < data.length; k++) {
    if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
      if (!temp[data[k][pid]][childrenKey]) {
        temp[data[k][pid]][childrenKey] = []
      }
      if (!temp[data[k][pid]]['_level']) {
        temp[data[k][pid]]['_level'] = 1
      }
      data[k]['_level'] = temp[data[k][pid]]._level + 1
      temp[data[k][pid]][childrenKey].push(data[k])
    } else {
      res.push(data[k])
    }
  }
  return res
}

第二种方式: 

function toTree(list) {
  let tree = []
  const oneLevels = list.filter(item => item.parentId == 0) // 一级数据
  if(oneLevels.length) {
    oneLevels.forEach(item => {
      let o = JSON.parse(JSON.stringify(item))
      if(!o.children) o.children = []
      let twoLevels = list.filter(arr => arr.parentId == o.id)  // 二级数据
      if(twoLevels.length) {
        twoLevels.forEach(t => {
          let obj = JSON.parse(JSON.stringify(t))
          obj.children = []
          let threeLevels = list.filter(e => e.parentId == obj.id)  // 三级数据
          if(threeLevels.length) {
            threeLevels.forEach(element => {
              let ele = JSON.parse(JSON.stringify(element))
              obj.children.push(ele)
            })
          }
          o.children.push(obj)
        })
      }
      tree.push(o)
    })
  }
  return tree
}

正常数据情况下,使用第一种就可以了,第一种性能要比第二种好得多。

但是有时候你会碰见很奇葩的数据,如下图:

类似于这种的,就有点奇葩

大家根据情况灵活处理

 测试数据:

var treeList = [
    {
        title: '系统管理',
        parentName: '',
        parentId: 0,
        id: 1,
    },
    {
        title: '角色新增',
        parentName: '角色管理',
        parentId: 22,
        id: 221,
    },
    {
        title: '角色编辑',
        parentName: '角色管理',
        parentId: 22,
        id: 222,
    },
    {
        title: '角色删除',
        parentName: '角色管理',
        parentId: 22,
        id: 223,
    },
    {
        title: '用户新增',
        parentName: '用户管理',
        parentId: 33,
        id: 331,
    },
    {
        title: '菜单新增',
        parentName: '菜单管理',
        parentId: 11,
        id: 111,
    },
    {
        title: '菜单编辑',
        parentName: '菜单管理',
        parentId: 11,
        id: 112,
    },
    {
        title: '用户管理',
        parentName: '系统管理',
        parentId: 0,
        id: 33,
    },
    {
        title: '菜单管理',
        parentName: '系统管理',
        parentId: 1,
        id: 11,
    },
    {
        title: '菜单删除',
        parentName: '菜单管理',
        parentId: 11,
        id: 113,
    },
    {
        title: '用户编辑',
        parentName: '用户管理',
        parentId: 33,
        id: 332,
    },
    {
        title: '角色管理',
        parentName: '系统管理',
        parentId: 1,
        id: 22,
    },
    {
        title: '用户删除',
        parentName: '用户管理',
        parentId: 33,
        id: 333,
    }
]

版权声明:本文为m0_51431448原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。