antd tree 画树形结构

最新推荐文章于 2024-07-24 09:36:01 发布

原创最新推荐文章于 2024-07-24 09:36:01 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #组装

react 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了如何在ReactJS项目中处理后端返回的非树形结构数据，将其转换为适合antd Tree组件展示的树形结构。重点在于通过数据中 parentId 和 Id 的关系进行组装。

有时候后端返回的数据并不是树形结构而是list 形式,需要自己对数据进行改造

原数据

 const arr = [
 { id: 0-0, title: '0-0', parentId: 0},
 { id: 1-0, title: '1-0', parentId: 0},
  {id: 0-0-0, title: '0-0-0', parentId: 0-0},
  {id: 0-0-1, title: '0-0-1', parentId: 0-0},
  {id: 0-0-2, title: '0-0-2', parentId: 0-0},
  {id: 0-0-0-0, title: '0-0-0-0', parentId: 0-0-2},
  {id: 0-0-0-1, title: '0-0-0-1', parentId: 0-0-2},
 ]

组装中


  // 根据菜单seq排序
  elementCompare = (obj1, obj2) => {
    const val1 = obj1.seq;
    const val2 = obj2.seq;
    if (val1 < val2) {
      return -1;
    } if (val1 > val2) {
      return 1;
    }
    return 0;
  }

  convertDatasToTree = (data, datas) => {
    const item = {
      id: data.id,
      title: data.title,
      parentId: data.parentId,
    };

    let childs = datas.filter(element => element.parentId === data.id);

    if (childs) {
      childs = childs.sort(this.elementCompare);
      item.children = [];
      childs.forEach((element) => {
        item.children.push(this.convertDatasToTree(element, datas));
      });
    }
    return item;
  }
  

const parents = arr.filter(item => item.parentId === 0); // 最大父级

const tempArr = [];
// 如果需要自己添加一个父级
// const tempArr = [
//  {
//      id: data.id,
//      title: data.title,
//      parentId: data.parentId,
//      children: [],
//    }
//]
// parents.map((item) => {
//   tempArr[0].children.push(this.convertDatasToTree(item, arr));
//  });

parents.map((item) => {
   tempArr.push(this.convertDatasToTree(item, arr));
  });


console.log(tempArr)

一定要有一个parentId 和 Id
组装数据

数据组装后

[
 {
   id: 0-0
   title: '0-0',
   parentId: 0,
   children: [
   {
     id: 0-0-0,
     title: '0-0-0',
     parentId: 0-0,
     children: [],
    },
    {
     id: 0-0-1,
     title: '0-0-1',
     parentId: 0-0,
     children: [],
    },
    {
     id: 0-0-2,
     title: '0-0-2',
     parentId: 0-0,
     children: [
      {
	     id: 0-0-0-0,
	     title: '0-0-0-0',
	     parentId: 0-0-2,
	     children: [],
	   },
	   {
	     id: 0-0-0-1,
	     title: '0-0-0-1',
	     parentId: 0-0-2,
	     children: [],
	   }],
      },
	 ]
	},
	{
	 id: 0-1
     title: '0-1',
     parentId: 0,
     children:[]
	}
]