问题描述
前端需要处理后端返回的数据，展示如下。
解决方式
因为使用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;
}
