vue js 递归遍历（求和）

1. 效果图 实现方式  使用的是vue + el-tree 

2.需求 

      自定义一个切换按钮 （下图资产/非资产）

      自定义添层级icon

 

 

 关于树的接口返回的结构我就不写了（大家都知道），直接上代码。

 

 

 2.1-----------自定义图标icon  

没有使用递归前，是这样写的代码。出现的问题是，根本不知道要遍历多少次，因为不知道到底有多少层。代码臃肿。

 

 使用递归，可以轻松实现多级遍历 （实现效果，不知道有多少层，也没关系，只要加个判断就ok了）

 

 

 

 

 

 

 2.2-----------自定义图标切换按钮

因为需要所有层级的总数据，所以我就采用了reduce求和

 使用递归，可以轻松实现多级遍历

 

 最后关于实现效果图我整理的数据是这样

     图一是使用递归把所有有层级的数据push到一个数组中。图二 是使用reduce 算出总数据