后台返回平铺数据，如何转换成树形json并渲染树形结构，ant tree 异步加载

如何后台返回对象数组（平铺式）

1、根据字段标识（板块）获取根节点

### 

initTreeData(dataOrg){
  var resultArr=dataOrg[0]
  var secArr=[];
  for(var i=0;i<dataOrg.length;i++){
    if(dataOrg[i].orgLevelName=='板块'){
      dataOrg[i].title=dataOrg[i].orgName
      dataOrg[i].key=dataOrg[i].orgId
      dataOrg[i].children=[];
      secArr.push(dataOrg[i])
    }
  }
  resultArr.title="企业名称"
  resultArr.key="109887"
  resultArr.children=secArr
  return resultArr
},


2、点击根节点获取对应的子节点数组并渲染树形结构

代码如下：

onLoadData (treeNode) {
  let _self=this;
  return new Promise((resolve) => {
    if(treeNode.dataRef.children){
      if (treeNode.dataRef.children.length>0) {
         resolve()
         return
      }
    }
    var  nextNode = _self.getUnitByOrgId(treeNode.eventKey,window.dataOrg)
    setTimeout(() => {
      treeNode.dataRef.children = nextNode
      this.treeDataQy = [...this.treeDataQy]
      resolve()
    }, 1000)
  })
},

3、根据根id获取子节点数组

getUnitByOrgId(orgId,dataOrg){
  let  allObj=[]
  var dataOrg=dataOrg
  for (var i = 0; i < dataOrg.length; i++) {
    if (dataOrg[i].orgLevelName == '单位') {
      if (dataOrg[i].parentId == orgId) {
        dataOrg[i].title = dataOrg[i].orgName
        dataOrg[i].key = dataOrg[i].orgId
        allObj.push(dataOrg[i])
      }
    }
  }
  return allObj
},


4、ant design 树形结构html代码

<a-tree
  checkable
  @expand="onExpandQy"
  v-model="checkedKeysQy"
  @select="onSelectQy"
  :selectedKeys="selectedKeysQy"
  :treeData="treeDataQy"
  :loadData="onLoadData"
/>

标签：treeNode,tree,ant,树形,dataOrg,var,return,children,resultArr
来源： https://www.cnblogs.com/shuihanxiao/p/11080960.html