vue+elementUi——递归的方式处理数据形成树形结构

系统管理员 2022-09-06 10:11 310阅读 0赞

最近在写后台管理系统时，遇到了一个树形结构的要求，效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
树形结构我是第一次用到，之前写的不是很多。因此看了一下文档，发现要实现树形结构，需要保证的数据结构如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
后台返回的原始数据结构如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
后台返回的数据都是对象数组，并没有根据父子级进行展示，需要自行判断处理，数据逻辑是：`parentID=0`的是父级，`parentID`不为0的，如果`parentID`与某个对象中的`id`相等，则表示为该对象的子级。

此时则需要用到递归。

数据处理代码如下：

以上函数的调用方式：`initTree({ pid: 0, pidStr: "parentID", list: res });`

先找父级，也就是`pid=0`，判断的参数是`parentID`，要循环的数据是`res`，此处的`res`就是接口后端返回的数组.

分析一下上面的代码：

`const child = list.filter(item=>item[pidStr]==pid)`:就是找到所有父级的元素，并保存到一个数组中。  
对数组进行`map`循环遍历，拿到每一项的`id`作为子级的匹配基准，`pidStr`就是一个字段名`parentID`,需要循环遍历的数据还是`list`，比如第一个父级的`id=1`，则找到所有`parentID=1`的子级数据，这个就是`id=1`的子级，如果有子级，也就是`initTree({ pid: item.id, pidStr, list }).length>0`的话，则将获取的数据作为`children`存放。否则直接`return`。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/d03558fb46b24eaead16348692cae113.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/14ee2bf46e3241049d89ab685174ff9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/8673a9d7853142b49c70e55dc3387d08.png