nzTree 树形结构数据准备-CSDN博客

本文链接：https://blog.csdn.net/idomyway/article/details/83416924

前言

需要从后台数据中获取数组结构的数据经过处理转换为nzTree的树形结构数据
本例中装换为带虚线的树形结构，其他的类似。
在这里插入图片描述

转换代码

思路：
1、先通过一个数组将树的分组类获取到
2、将获取的数据和分组数组比较将获取的数据以children数组形式划分到不同的分组类中

Result是从后台获取到的数组；
在这里插入图片描述

import {NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd';
    
nodes：NzTreeNodeOptions[];
  
var classifyname =[];
var NzTreeNodeArr = [];
if(result.length != 0){
    classifyname.push(result[0].classifyname);
    for(let i=0;i<result.length;i++){
      if(!(classifyname.indexOf(result[i].classifyname) > -1)){
        classifyname.push(result[i].classifyname);
      }
}
for(let i=0;i<classifyname.length;i++){
  var classifyObj ={};
  classifyObj["title"] = classifyname[i];
  classifyObj["key"] = "100"+i;
  classifyObj["children"] = [];
  for(let k=0;k<result.length;k++){
    if(classifyname[i]===result[k].classifyname){
      var classifyItem ={};
      classifyItem["title"] = result[k].aliasname;
      classifyItem["key"] = "100"+i+k;
      classifyItem["isLeaf"] = true;
      classifyObj["children"].push(classifyItem);
    }
  }
  NzTreeNodeArr.push(new NzTreeNode({
    title   : classifyObj["title"],
    key     : classifyObj["key"],
    children: classifyObj["children"]
  }));
}
This.nodes = NzTreeNodeArr;