React+AntDesign使用Tree樹控件完整展現其中的層級關系,並具有展開收起選擇等交互功能


(一)需求展示效果圖

1.新增時樹形控件展示效果
在這里插入圖片描述
2.編輯時樹形控件展示效果
在這里插入圖片描述

(二)實現代碼

1.使用樹形控件,選擇自己需要實現的功能的相關調用方法跟值

在這里插入圖片描述
在這里插入圖片描述
2.觸發事件時獲取數據及控件展示問題

在這里插入圖片描述
在這里插入圖片描述

(三)關於樹形結構轉化說明

如果后台傳過來的樹形數據跟展示不同,就需要前台這邊自己進行處理

比如這次后台傳過來的數據格式:

在這里插入圖片描述

1.可以通過遍歷,點擴展運算符獲取數據每項做對應數據轉化處理。
在這里插入圖片描述
在這里插入圖片描述
2.也可以使用遞歸的方法進行一個樹或者森林的遍歷。下面是同樣的樹數據,但是有判斷篩選處理。

在這里插入圖片描述
在這里插入圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM