思路: 

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;
  }


 

Logo

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

更多推荐