React+AntDesign使用Tree树控件完整展现其中的层级关系,并具有展开收起选择等交互功能

(一)需求展示效果图

1.新增时树形控件展示效果
![在这里插入图片描述]( https://img-blog.csdnimg.cn/2020102614290751.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FsYW5ybnplYXJu,size_16,color_FFFFFF,t_70#pic_center)
2.编辑时树形控件展示效果
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201026143022274.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FsYW5ybnplYXJu,size_16,color_FFFFFF,t_70#pic_center)

(二)实现代码

1.使用树形控件,选择自己需要实现的功能的相关调用方法跟值

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201026103314321.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FsYW5ybnplYXJu,size_16,color_FFFFFF,t_70#pic_center)
在这里插入图片描述
2.触发事件时获取数据及控件展示问题

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201026143412980.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FsYW5ybnplYXJu,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201026143531356.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FsYW5ybnplYXJu,size_16,color_FFFFFF,t_70#pic_center)

(三)关于树形结构转化说明

如果后台传过来的树形数据跟展示不同,就需要前台这边自己进行处理

比如这次后台传过来的数据格式:

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201026141123536.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FsYW5ybnplYXJu,size_16,color_FFFFFF,t_70#pic_center)

1.可以通过遍历,点扩展运算符获取数据每项做对应数据转化处理。
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201026141736403.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FsYW5ybnplYXJu,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201026142053353.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FsYW5ybnplYXJu,size_16,color_FFFFFF,t_70#pic_center)
2.也可以使用递归的方法进行一个树或者森林的遍历。下面是同样的树数据,但是有判断筛选处理。

![在这里插入图片描述]( https://img-blog.csdnimg.cn/2020102614263065.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FsYW5ybnplYXJu,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201026142739904.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FsYW5ybnplYXJu,size_16,color_FFFFFF,t_70#pic_center)

posted @ 2020-10-26 15:19  治愈系的江予夺  阅读(4440)  评论(0)    收藏  举报