vue js 遞歸遍歷(求和)


1. 效果圖 實現方式  使用的是vue + el-tree 

2.需求 

      自定義一個切換按鈕 (下圖資產/非資產)

      自定義添層級icon

 

 

 關於樹的接口返回的結構我就不寫了(大家都知道),直接上代碼。

 

 

 2.1-----------自定義圖標icon  

沒有使用遞歸前,是這樣寫的代碼。出現的問題是,根本不知道要遍歷多少次,因為不知道到底有多少層。代碼臃腫。

 

 使用遞歸,可以輕松實現多級遍歷 (實現效果,不知道有多少層,也沒關系,只要加個判斷就ok了)

 

 

 

 

 

 

 2.2-----------自定義圖標切換按鈕

因為需要所有層級的總數據,所以我就采用了reduce求和

 使用遞歸,可以輕松實現多級遍歷

 

 最后關於實現效果圖我整理的數據是這樣

     圖一是使用遞歸把所有有層級的數據push到一個數組中。圖二 是使用reduce 算出總數據 

 


免責聲明!

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



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