element-ui树形控件后台返回的数据+生成组织树的工具类

生成树形组织结构需要以下两个步骤:

1. 后台返回的数据必须是一个符合规范的JSON格式的树形结构。

例如，以下是符合规范的树形JSON数据结构示例：

[
  {
    "id": 1,
    "name": "Node1",
    "children": [
      {
        "id": 2,
        "name": "Node2"
      },
      {
        "id": 3,
        "name": "Node3"
      }
    ]
  },
  {
    "id": 4,
    "name": "Node4",
    "children": [
      {
        "id": 5,
        "name": "Node5"
      }
    ]
  }
]

1. 使用工具类将数据转换为树形结构。

以下是一个生成树形结构的示例代码：

function buildTree(list) {
  let map = {}, node;
  for(let i = 0; i < list.length; i++) {
    node = list[i];
    node.children= [];
    map[node.id] = node;
    if(node.parentId) {
      if(!map[node.parentId].children) {
        map[node.parentId].children= [];
      }
      map[node.parentId].children.push(node);
    }
  }
  return map[0].children;
}

以上代码中的list是后台返回的数据，id和parentId是节点ID和父级节点ID。

示例1：

后台返回的数据结构为:

[
  {
    "id": 1,
    "name": "Node1",
    "pid": 0
  },
  {
    "id": 2,
    "name": "Node2",
    "pid": 1
  },
  {
    "id": 3,
    "name": "Node3",
    "pid": 1
  },
  {
    "id": 4,
    "name": "Node4",
    "pid": 2
  },
  {
    "id": 5,
    "name": "Node5",
    "pid": 2
  }
]

我们可以使用以下代码将上述数据转换为树形结构：

let data = [
  {id: 1, name: 'Node1', pid: 0},
  {id: 2, name: 'Node2', pid: 1},
  {id: 3, name: 'Node3', pid: 1},
  {id: 4, name: 'Node4', pid: 2},
  {id: 5, name: 'Node5', pid: 2},
]

let result = buildTree(data);
console.log(result);

示例2：

后台返回的数据结构为：

[
  {
    "Id": 1,
    "Name": "Node1",
    "ParentId": null
  },
  {
    "Id": 2,
    "Name": "Node2",
    "ParentId": 1
  },
  {
    "Id": 3,
    "Name": "Node3",
    "ParentId": 1
  },
  {
    "Id": 4,
    "Name": "Node4",
    "ParentId": 2
  },
  {
    "Id": 5,
    "Name": "Node5",
    "ParentId": 2
  }
]

使用以下代码将上述数据转换成树形数据结构：

let data = [
  {Id: 1, Name: 'Node1', ParentId: null},
  {Id: 2, Name: 'Node2', ParentId: 1},
  {Id: 3, Name: 'Node3', ParentId: 1},
  {Id: 4, Name: 'Node4', ParentId: 2},
  {Id: 5, Name: 'Node5', ParentId: 2},
]

let result = buildTree(data.map(node => {
  return {
    id: node.Id,
    name: node.Name,
    parentId: node.ParentId
  }
}));

console.log(result);