问题描述

在使用Ant Design of Vue的 树型选择控件时，服务端返回的数据如下：

let arr = [
    {
      "id": "0",
      "pid": "-1",
      "value": "香港明华船务有限公司",
      "mmsi": null
    },
    {
      "id": "0-0",
      "pid": "0",
      "value": "超大型矿砂船",
      "mmsi": null
    },
    {
      "id": "0-0-0",
      "pid": "0-0",
      "value": "H1448",
      "mmsi": "477232500"
    },
    {
      "id": "0-0-1",
      "pid": "0-0",
      "value": "H1447",
      "mmsi": "477286900"
    }
 ]

树形控件需要的树形结构如下：

let arr = [
    {
      "id": "0",
      "pid": "-1",
      "value": "香港明华船务有限公司",
      "mmsi": null,
      children:[
        {
	      "id": "0-0",
	      "pid": "0",
	      "value": "超大型矿砂船",
	      "mmsi": null,
	      children:[
			   {
			      "id": "0-0-0",
			      "pid": "0-0",
			      "value": "H1448",
			      "mmsi": "477232500"
			    },
			    {
			      "id": "0-0-1",
			      "pid": "0-0",
			      "value": "H1447",
			      "mmsi": "477286900"
			    }
			]
	    }
  	  ]
    }
] 

代码如下

// 入口方式
//arr 待处理数组
//rootId 根ID
function getTrees (arr,rootId) {
  let resultArr = []
  // 将第一级计算
  arr.map(item => {
    if (item.pid == rootId) {
      resultArr.push(item)
    }
  })
  //循环第一级 进入递归
  resultArr.map(item => {
    return item = singleTree(arr,item)
  })
  return resultArr
}
// 单个树 通过递归计算
function singleTree (arr, obj) {
  // 判断是否含有下一级 
  let flag = arr.filter(item => {
    return item.pid === obj.id
  })
  // 开关 递归终止条件
  if (flag.length <= 0) {
    return obj
  }
  //循环体
  obj.children = []
  arr.map((item, index) => {
    if (item.pid === obj.id) {
      obj.children.push(item)
    }
    return item
  })
  // 循环自己调用递归
  obj.children.map(item => {
    return item = singleTree(arr,item)
  })
  return obj
}

let tableData = getTrees(arr,'-1')
console.log(tableData);

code可以实现多级树形结构处理