前端纯数组转树形结构

问题描述

前端需要处理后端返回的数据，展示如下。

解决方式

因为使用ProTable组件，那么数据只要携带children字段，就可以如上图展示。

方式一：后端返回数据的时候，直接封装好，如下：

const testMenuList = [
  {
    "id": 100100,
    "parentId": 0,
    "icon": "setting",
    "name": "系统管理",
    "path": "",
    "uri": "",
    "sort": 0,
    "hidden": 1,
    "type": 0,
    "children": [
		{
		    "id": 100101,
		    "parentId": 100100,
		    "icon": "",
		    "name": "app版本管理",
		    "path": "",
		    "uri": "",
		    "sort": 0,
		    "hidden": 1,
		    "type": 1,
		},
		{
			"id": 100102,
		    "parentId": 100100,
		    "icon": "",
		    "name": "部门管理",
		    "path": "",
		    "uri": "",
		    "sort": 1,
		    "hidden": 1,
		    "type": 1,
		},
		{
		    "id": 100103,
		    "parentId": 100100,
		    "icon": "",
		    "name": "角色管理",
		    "path": "",
		    "uri": "",
		    "sort": 2,
		    "hidden": 1,
		    "type": 1,
		},
		{
		    "id": 100104,
		    "parentId": 100100,
		    "icon": "",
		    "name": "菜单管理",
		    "path": "",
		    "uri": "",
		    "sort": 3,
		    "hidden": 1,
		    "type": 1,
		},
	]
  },
  {
    "id": 100200,
    "parentId": 0,
    "icon": "message",
    "name": "新闻管理",
    "path": "",
    "uri": "",
    "sort": 1,
    "hidden": 1,
    "type": 0,
    "children":[
		{
		    "id": 100201,
		    "parentId": 100200,
		    "icon": "",
		    "name": "新闻首页维护",
		    "path": "",
		    "uri": "",
		    "sort": 0,
		    "hidden": 1,
		    "type": 1,
		},
		{
		    "id": 100202,
		    "parentId": 100200,
		    "icon": "",
		    "name": "置顶新闻",
		    "path": "",
		    "uri": "",
		    "sort": 1,
		    "hidden": 1,
		    "type": 1,
		},
		{
		    "id": 100203,
		    "parentId": 100200,
		    "icon": "",
		    "name": "专题新闻",
		    "path": "",
		    "uri": "",
		    "sort": 2,
		    "hidden": 1,
		    "type": 1,
		},
		{
		    "id": 100204,
		    "parentId": 100200,
		    "icon": "",
		    "name": "地方性新闻",
		    "path": "",
		    "uri": "",
		    "sort": 3,
		    "hidden": 1,
		    "type": 1,
		},
	]
  },
]

方式二：

后端不携带children字段，返回所有数据由前端进行处理，如下格式：

const testMenuList = [
  {
    "id": 100100,
    "parentId": 0,
    "icon": "setting",
    "name": "系统管理",
    "path": "",
    "uri": "",
    "sort": 0,
    "hidden": 1,
    "type": 0,
  },
  {
    "id": 100101,
    "parentId": 100100,
    "icon": "",
    "name": "app版本管理",
    "path": "project/cms/system/app/index",
    "uri": "project/cms/system/app",
    "sort": 0,
    "hidden": 1,
    "type": 1,
  },
  {
    "id": 100102,
    "parentId": 100100,
    "icon": "",
    "name": "部门管理",
    "path": "project/cms/system/department/index",
    "uri": "project/cms/system/department",
    "sort": 1,
    "hidden": 1,
    "type": 1,
  },
  {
    "id": 100103,
    "parentId": 100100,
    "icon": "",
    "name": "角色管理",
    "path": "project/cms/system/role/index",
    "uri": "project/cms/system/role",
    "sort": 2,
    "hidden": 1,
    "type": 1,
  },
  {
    "id": 100104,
    "parentId": 100100,
    "icon": "",
    "name": "菜单管理",
    "path": "project/cms/system/menu/index",
    "uri": "project/cms/system/menu",
    "sort": 3,
    "hidden": 1,
    "type": 1,
  },
  {
    "id": 100200,
    "parentId": 0,
    "icon": "message",
    "name": "新闻管理",
    "path": "",
    "uri": "",
    "sort": 1,
    "hidden": 1,
    "type": 0,
  },
  {
    "id": 100201,
    "parentId": 100200,
    "icon": "",
    "name": "新闻首页维护",
    "path": "project/cms/news/frontpage/index",
    "uri": "project/cms/news/frontpage",
    "sort": 0,
    "hidden": 1,
    "type": 1,
  },
  {
    "id": 100202,
    "parentId": 100200,
    "icon": "",
    "name": "置顶新闻",
    "path": "project/cms/news/top/index",
    "uri": "project/cms/news/top",
    "sort": 1,
    "hidden": 1,
    "type": 1,
  },
  {
    "id": 100203,
    "parentId": 100200,
    "icon": "",
    "name": "专题新闻",
    "path": "project/cms/news/special/index",
    "uri": "project/cms/news/special",
    "sort": 2,
    "hidden": 1,
    "type": 1,
  },
  {
    "id": 100204,
    "parentId": 100200,
    "icon": "",
    "name": "地方性新闻",
    "path": "project/cms/news/original/index",
    "uri": "project/cms/news/original",
    "sort": 3,
    "hidden": 1,
    "type": 1,
  },
]

处理函数如下：

/**
将数组转为树形
*/
export function ofList(
    data,
    rootIndex,
    itemHandler = item => item,
    current = 'id',
    parentId = 'parentId',
    children = 'children',
  ) {
    const treeData = [];
  
    let index = 0;
  
    while (index < data.length) {
      const item = itemHandler(data[index]);
  
      if (item[parentId] === rootIndex) {
        data.splice(index, 1);
        const childrens = ofList(data, item[current], itemHandler, current, parentId, children);
        item[children] = childrens.length > 0 ? childrens : undefined;
        treeData.push(item);
        index = 0;
      } else {
        index += 1;
      }
    }
  
    return treeData;
}

处理后的数据就是方式一的数据格式。因为最近在写前端，所以就在前端处理一下数据，后期赋上方式一的处理。