扁平化数据处理

一维数组化数结构数据

• 有一数组，展现某公司组织结构

[
	 {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: "宝山分部"}
]

• 现要求，将此数组以树结构展示在页面的dom结构中，如果后端就返回了这样的一个数组，是无法直接将数组展示成树的样式的，封装下面方法，可以将上面数组根据子集pid对应父级id逐一分级，最后返回分级之后的树形结构数据。

function 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  // 这里返回一个新数据，来接收转化之后的树结构数据。
    }