美文网首页
数组转树

数组转树

作者: 沃德麻鸭 | 来源:发表于2021-08-15 20:53 被阅读0次

    把后端传过来的平铺数组数据处理为tree组件需要的树形数据

    首先要补充工具函数,在**`src/utils/index.js`**文件中,补充一个函数tranListToTreeData,如下:

    原数据结构

    ①因为最终要产出树状数据的数组  所以首先要创建一个空数组,而数组中又要包含若干个对象,所以也要创建一个空对象

    ②建立一个映射关系,使得可以通过id快速找到对应的元素,这时就要对原数组进行遍历  这次遍历只是为了将新对象调整成自己想要的格式(数组中套对象)

    首先要给每一项添加一个children属性

    然后给空对象赋值,key值是每一项的id,value值是遍历的每一项

    实现代码

    ③这时的空对象中数据的格式就是以每一项的id为key 值,以每一项结果为value值,然后对数组再遍历一次  这次遍历是为了给新数组赋值

    如果pid的值为空,说明这一项就是父级,也代表在它的children属性中将会有其他项的pid与这一项id值相对应的子节点会被添加进来,而此时如果遍历到了这一项,需要做的就是将它直接push到新的空数组里让它作为父级准备使用

    如果pid不为空就是子节点,那么就将这一项push到id值与之相同的父级children属性中

    最后将新数组返回

    代码实现

    ④将这个工具函数导出,并导入到需要的组件中使用即可

    之前创建生成的对象只是为了查询使用(通过原数组每一项的pid在新的对象map中找出与pid这个键相对应的值,这个值就是父级数据),最终传入的是另一个新的数组

    相关文章

      网友评论

          本文标题:数组转树

          本文链接:https://www.haomeiwen.com/subject/ugxebltx.html