后台返回平铺数据,如何转换成树形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"
/>


猜你喜欢

转载自www.cnblogs.com/shuihanxiao/p/11080960.html