后台返回List结构，前台遍历组装成element的树形数据

后台返回的数据：自定义bean或者map都可以

{
  "msg": "操作成功",
  "result": [
    {
      "drop": false,
      "clickHandler": false,
      "gislefturl": "",
      "icon": "",
      "existed": false,
      "routeName": "",
      "gis": false,
      "checked": false,
      "clickExpand": false,
      "drag": false,
      "id": "37060700",
      "text": "",
      "nocheck": false,
      "chkDisabled": false,
      "iconOpen": "",
      "isParent": false,
      "manager": "",
      "index": "",
      "oldParentId": "",
      "click": "",
      "iconClose": "",
      "parentId": "37060000",
      "url": "",
      "target": "",
      "if_check": "0",
      "phone": "",
      "name": "牟平",
      "infoMap": {},
      "menuType": "",
      "open": false,
      "desc": ""
    },
    {
      "drop": false,
      "clickHandler": false,
      "gislefturl": "",
      "icon": "",
      "existed": false,
      "routeName": "",
      "gis": false,
      "checked": false,
      "clickExpand": false,
      "drag": false,
      "id": "37060701",
      "text": "",
      "nocheck": false,
      "chkDisabled": false,
      "iconOpen": "",
      "isParent": false,
      "manager": "",
      "index": "",
      "oldParentId": "",
      "click": "",
      "iconClose": "",
      "parentId": "37060700",
      "url": "",
      "target": "",
      "if_check": "0",
      "phone": "",
      "name": "办公室",
      "infoMap": {},
      "menuType": "",
      "open": false,
      "desc": ""
    },
    {
      "drop": false,
      "clickHandler": false,
      "gislefturl": "",
      "icon": "",
      "existed": false,
      "routeName": "",
      "gis": false,
      "checked": false,
      "clickExpand": false,
      "drag": false,
      "id": "37060702",
      "text": "",
      "nocheck": false,
      "chkDisabled": false,
      "iconOpen": "",
      "isParent": false,
      "manager": "",
      "index": "",
      "oldParentId": "",
      "click": "",
      "iconClose": "",
      "parentId": "37060700",
      "url": "",
      "target": "",
      "if_check": "0",
      "phone": "",
      "name": "工程管理科",
      "infoMap": {},
      "menuType": "",
      "open": false,
      "desc": ""
    },
    {
      "drop": false,
      "clickHandler": false,
      "gislefturl": "",
      "icon": "",
      "existed": false,
      "routeName": "",
      "gis": false,
      "checked": false,
      "clickExpand": false,
      "drag": false,
      "id": "37060703",
      "text": "",
      "nocheck": false,
      "chkDisabled": false,
      "iconOpen": "",
      "isParent": false,
      "manager": "",
      "index": "",
      "oldParentId": "",
      "click": "",
      "iconClose": "",
      "parentId": "37060700",
      "url": "",
      "target": "",
      "if_check": "0",
      "phone": "",
      "name": "计划财务科",
      "infoMap": {},
      "menuType": "",
      "open": false,
      "desc": ""
    },
 
  ],
  "code": 0
}

 

前台vue方法：

flap2tree(arr, key = 'id', parentKey = 'pid', rootFilter) {

let rs = [];

let mapObj = {};

let copyArr = [];

arr.forEach((item) => {

let newItem = {...item};

copyArr.push(newItem);

mapObj[item[key]] = newItem;

});

copyArr.forEach((item) => {

let pid = item[parentKey];

let parent = null;

if (pid) {

parent = mapObj[pid];

if (parent) {

if (!parent.children) {

parent.children = [];

}

parent.children.push(item);

}

}

if (!parent) {

rs.push(item);

}

mapObj[item[key]] = item;

});

if (rootFilter) {

rs = rs.filter(rootFilter);

}

return rs;

}