1. 效果图 实现方式 使用的是vue + el-tree
2.需求
自定义一个切换按钮 (下图资产/非资产)
自定义添层级icon
关于树的接口返回的结构我就不写了(大家都知道),直接上代码。
2.1-----------自定义图标icon
没有使用递归前,是这样写的代码。出现的问题是,根本不知道要遍历多少次,因为不知道到底有多少层。代码臃肿。
使用递归,可以轻松实现多级遍历 (实现效果,不知道有多少层,也没关系,只要加个判断就ok了)
2.2-----------自定义图标切换按钮
因为需要所有层级的总数据,所以我就采用了reduce求和
使用递归,可以轻松实现多级遍历
最后关于实现效果图我整理的数据是这样
图一是使用递归把所有有层级的数据push到一个数组中。图二 是使用reduce 算出总数据