Return tiled background data, how to convert into a tree and render json tree, ant tree loaded asynchronously

How backstage returns an array of objects (tiled)

 

1, obtaining according to the root node identification field (segment)

### 

initTreeData (dataOrg) { 
  var resultArr dataOrg = [0] 
  var secArr = []; 
  for (var I = 0; I <dataOrg.length; I ++) { 
    IF (dataOrg [I] .orgLevelName == 'plate') { 
      dataOrg [I] = .title dataOrg [I] .orgName 
      dataOrg [I] .key = dataOrg [I] .orgId 
      dataOrg [I] .children = []; 
      secArr.push (dataOrg [I]) 
    } 
  } 
  resultArr.title = "company name" 
  resultArr.key = "109 887" 
  resultArr.children = secArr 
  return resultArr 
}, 


2, click the root node acquisition sub-array and corresponding render tree

 

code show as below:

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"
/>