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