后台返回平鋪數據，如何轉換成樹形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"
/>