处理树形结构_树形结构pid-CSDN博客

本文链接：https://blog.csdn.net/qq_40745468/article/details/129048414

该文章介绍如何将后端传递的平铺数组数据转换为树形结构，适用于树形组件。通过在utils/index.js中封装一个递归函数transTree，利用pid和id的关系构建嵌套结构。在Vue组件中调用此函数处理数据，将扁平化的部门数据转换为树形结构，以便展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

处理树形结构

目标

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

讲解

分析

把我们第一天的函数, 封装成工具，单独放在 utils\index.js 下边

数据结构比较复杂，如果使用循环，会产生多层 for 循环，因此需要使用递归

分析数据结构

pid：父级部门 id

如果为空，说明是 1 级

如果不为空，pid 代表的是父级的 id，

pid 代表的是父级的 id，那是否可以使用 id 和 pid 形成嵌套关系呢？

可以

实现

在 src\utils\index.js 中进行代码的封装

/**
 * 把扁平结构的数据, 转成树形控件
 * @param {*} list
 * @param {*} rootValue
 * @returns
 */
export function transTree(list, rootValue) { 
// list: 整个数组, rootValue本次要查找的目标id -> 此函数为了找到rootValue目标id的下属们
  const treeData= [] // 装下属对象的
  list.forEach(item=> {
    if (item.pid===rootValue) { // 当前对象pid符合, 继续递归调用查找它的下属
      const children=transTree(list, item.id) // 返回item对象下属数组
      if (children.length) {
        item.children=children// 为item添加children属性保存下属数组
      }
      treeData.push(item) // 把当前对象保存到数组里, 继续遍历
    }
  })
  return treeData// 遍历结束, rootValue的id对应下属们收集成功, 返回给上一次递归调用children, 加到父级对象的children属性下
}

在 src\views\departments\index.vue 导入插件并调用

import { transTree } from'@/utils'

async created() {
    const res=await departmentsListAPI()
    this.treeData=transTree(res.data.depts, '') // 因为后台返回的字段是id和pid而且根是空字符串, 如果不是需要自己改变transTree里判断条件等
  },