扁平化数据转换树形结构

xiaochen_____

已于 2024-03-26 09:45:31 修改

阅读量842

点赞数 1

文章标签： javascript 前端

于 2023-02-13 15:46:12 首次发布

本文链接：https://blog.youkuaiyun.com/xiaochen_____/article/details/129010382

版权

该文章介绍了一个JavaScript方法`listToTreeData`，用于将具有ID和PID（父ID）属性的列表数据转换为树形结构。在Vue环境中，此方法通过递归遍历数据，找到根节点并构建子节点集合，最终生成层次化的树结构数据。

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

树形结构根据数据Id、pid进行树形结构的转化过程

  listToTreeData(data, rootValue) {
      let arr = []
      // data就是要转化的列表数据,rootValue列表数据的第一条，遍历数据就从rootValue开始遍历
      // 遍历原则 =>要有领导，根，就是要知道从哪里开始遍历，
      data.forEach(item => {
        // item就是列表中的每条数据
        if (item.pid === rootValue) {
          //走进这里说明找到了根，开始遍历的数据下标，然后去找根下面的数据
          arr.push(item)
          // 子集的pid应该跟父集的id相同，将子追加到父集之中，所以第二个参数应该是id，而不是rootValue数据下标
          const children = this.listToTreeData(data, item.id)
          children.length && (item.child = children)
        }
      })
      return arr  // 这里返回一个新数据，来接收转化之后的树结构数据。
    }

vue语法调用实例；拿到数据之后将数据当做参数调用这个函数就可以实现树结构数据的转化

<template>
  <div class="home">
     切换数据结构
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      list: [
        {id: 1, pid: 0, address: "总公司"},
        {id: 2, pid: 1, address: "北京分公司"},
        {id: 3, pid: 1, address: "上海分公司"},
        {id: 4, pid: 1, address: "郑州分公司"},
        {id: 5, pid: 1, address: "杭州分公司"},
        {id: 6, pid: 2, address: "怀柔分部"},
        {id: 7, pid: 5, address: "萧山分部"},
        {id: 8, pid: 5, address: "临平分部"},
        {id: 9, pid: 5, address: "临安分部"},
        {id: 10, pid: 4, address: "管城自治区分部"},
        {id: 11, pid: 2, address: "昌平分部"},
        {id: 12, pid: 3, address: "宝山分部"},
      ]
    }
  },
  created() {
    this.list = this.listToTreeData(this.list, 0)
    consloe.log(this.list)
  },