码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-10-27 11:10:51      阅读:58      评论:0      收藏:0      [点我收藏+]

标签:选择   不同   描述   http   功能   sig   判断   需要   str   

(一)需求展示效果图

1.新增时树形控件展示效果
技术图片
2.编辑时树形控件展示效果
技术图片

(二)实现代码

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

技术图片
技术图片
2.触发事件时获取数据及控件展示问题

技术图片
技术图片

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

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

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

技术图片

1.可以通过遍历,点扩展运算符获取数据每项做对应数据转化处理。
技术图片
技术图片
2.也可以使用递归的方法进行一个树或者森林的遍历。下面是同样的树数据,但是有判断筛选处理。

技术图片
技术图片

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

标签:选择   不同   描述   http   功能   sig   判断   需要   str   

原文地址:https://www.cnblogs.com/zyxdjyd/p/13878667.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!