友情提示：图片看不清请点击鼠标右键，查看图像

一、需求分析

1、后端以数组形式返回树的所有节点数据，每个节点数据格式如下：

这里写图片描述

2、我们只需要关心节点与节点之间的连接属性parentId即可，其他属性无需关心，parentId会指明当前节点关联的父级节点id号

3、这里我基于primeng控件库的p-tree配置进行演示（ps：primeng是angular4接近最全的控件库），关于primeng请查看primeng官网

4、这里我给出p-tree渲染树所需要的数据配置

5、看完p-tree的数据配置，我们只需要将节点的子节点添加进该节点的children属性对应的字段里面（ps：市面上的树的渲染配置都是大同小异）

二、拼树的具体实现

1、这里我展示一下如何拼出这棵树需要的渲染配置（所有的逻辑我都进行了备注，这里省略了业务相关的其他代码，比如加图标）

2、下面是p-tree依据组合成功的数据进行渲染的结果