antd的TreeSelect组件,把后台返回的数据处理成树形结构
思路:1、定义一个空数组nodeData,用于存储新构造的对象,let nodeData =[];2、遍历后台传来的数组treeData,treeData.map()(1)定义一个空对象,let treeObj = {};(2)将数组中需要的属性赋值给新对象,作为新对象中的一个属性treeObj.title = item.deptName;treeObj.value = item.deptName
思路:
1、定义一个空数组nodeData,用于存储新构造的对象,let nodeData =[];
2、遍历后台传来的数组treeData,treeData.map()
(1)定义一个空对象, let treeObj = {};
(2)将数组中需要的属性赋值给新对象,作为新对象中的一个属性
treeObj.title = item.deptName;
treeObj.value = item.deptName
treeObj.key = item.deptId;
(3)针对有子节点的数组对象,需要根据条件对节点的children数组进行递归,如果有子节点,则递归执行函数,无则不处理,
item.hasChildren ? treeObj.children = this.handleTreeData(item.children) : null;
(特别注意,在react的class组件中,函数里面的递归也需要添加this指向,否则将无法执行)
(5)最后把新对象push进一开始构造的新数组,从而形成了一个新的树形数据结构的数组
nodeData.push(treeObj);
3、最后返回新数组,return nodeData;
完整的处理函数如下:
// 把后台返回数据变成树形结构
handleTreeData = (treeData) => {
let nodeData =[];
treeData.map(item => { //此处也可以直接用es6的数组解构,直接在解构的基础上添加新属性
let treeObj = {};
treeObj.title = item.deptName;
treeObj.value = item.deptName;
treeObj.key = item.deptId;
item.hasChildren ? treeObj.children = this.handleTreeData(item.children) : null;
nodeData.push(treeObj);
})
return nodeData;
}

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐
所有评论(0)