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

Posted zyxdjyd

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React+AntDesign使用Tree树控件完整展现其中的层级关系,并具有展开收起选择等交互功能相关的知识,希望对你有一定的参考价值。

(一)需求展示效果图

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

(二)实现代码

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

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

技术图片
技术图片

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

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

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

技术图片

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

技术图片
技术图片











以上是关于React+AntDesign使用Tree树控件完整展现其中的层级关系,并具有展开收起选择等交互功能的主要内容,如果未能解决你的问题,请参考以下文章

vue中使用树控件el-tree如何实现添加加虚线展开树节点样式

6个常用的React组件库

jQuery EasyUI 数据树控件(Tree)的简单使用实例

树控件(Tree Control),标签控件(tab control)

React开发(184):ant design Tree树形控件

antdesign的Input控件加了初始化值,网站控制台暴警告,啥原因