把后端传过来的平铺数组数据处理为tree组件需要的树形数据
首先要补充工具函数,在**`src/utils/index.js`**文件中,补充一个函数tranListToTreeData,如下:
原数据结构①因为最终要产出树状数据的数组 所以首先要创建一个空数组,而数组中又要包含若干个对象,所以也要创建一个空对象
②建立一个映射关系,使得可以通过id快速找到对应的元素,这时就要对原数组进行遍历 这次遍历只是为了将新对象调整成自己想要的格式(数组中套对象)
首先要给每一项添加一个children属性
然后给空对象赋值,key值是每一项的id,value值是遍历的每一项
实现代码③这时的空对象中数据的格式就是以每一项的id为key 值,以每一项结果为value值,然后对数组再遍历一次 这次遍历是为了给新数组赋值
如果pid的值为空,说明这一项就是父级,也代表在它的children属性中将会有其他项的pid与这一项id值相对应的子节点会被添加进来,而此时如果遍历到了这一项,需要做的就是将它直接push到新的空数组里让它作为父级准备使用
如果pid不为空就是子节点,那么就将这一项push到id值与之相同的父级children属性中
最后将新数组返回
代码实现④将这个工具函数导出,并导入到需要的组件中使用即可
网友评论