nzTree 树形结构数据准备

女爷i 2021-09-16 17:52 657阅读 0赞

### 前言 ###

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

### 转换代码 ###

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

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

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;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_27_color_FFFFFF_t_70]: /images/20210726/f41b1ab72d9541c9949c57660a78df8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_27_color_FFFFFF_t_70 1]: /images/20210726/2ece7bac031047699f217bff06ea1612.png