React+AntDesign使用Tree树控件完整展现其中的层级关系,并具有展开收起选择等交互功能
Posted zyxdjyd
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React+AntDesign使用Tree树控件完整展现其中的层级关系,并具有展开收起选择等交互功能相关的知识,希望对你有一定的参考价值。
(一)需求展示效果图
1.新增时树形控件展示效果
2.编辑时树形控件展示效果
(二)实现代码
1.使用树形控件,选择自己需要实现的功能的相关调用方法跟值
2.触发事件时获取数据及控件展示问题
(三)关于树形结构转化说明
如果后台传过来的树形数据跟展示不同,就需要前台这边自己进行处理
比如这次后台传过来的数据格式:
1.可以通过遍历,点扩展运算符获取数据每项做对应数据转化处理。
2.也可以使用递归的方法进行一个树或者森林的遍历。下面是同样的树数据,但是有判断筛选处理。
以上是关于React+AntDesign使用Tree树控件完整展现其中的层级关系,并具有展开收起选择等交互功能的主要内容,如果未能解决你的问题,请参考以下文章
vue中使用树控件el-tree如何实现添加加虚线展开树节点样式
jQuery EasyUI 数据树控件(Tree)的简单使用实例
树控件(Tree Control),标签控件(tab control)