友情提示：图片看不清请点击鼠标右键，查看图像
一、需求分析
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依据组合成功的数据进行渲染的结果
网友评论