扁平结构数据转换成层级嵌套树形数据

---

前言

树形控件在OA系统内是很常见的，如依赖jquery的ztree，elementui的el-tree,其中ztree是支持扁平结构和层级结构的，el-tree是只支持层级结构，后台一般查完数据库不处理数据的话，都是返回扁平数据，即通过id、pid判断父子关系，但在el-tree中使用就需要前台处理了，如果不想处理，也可以要求后台返回要求的格式，重在沟通。

---

一、转换方法

1.递归

function treeData(data, pid="0") {
    let arr = []
    arr.forEach(item => {
        if (item.pid === pid) {
            item.children = treeData(data, item.id)
            arr.push(item)
        };
    })
    return arr
}

2.双层filter

function handleTree(data, id, parentId, children, rootId) {
  id = id || 'id'
  parentId = parentId || 'parentId'
  children = children || 'children'
  rootId = rootId || 0
  // 对源数据深度克隆
  const cloneData = JSON.parse(JSON.stringify(data))
  // 循环所有项
  const treeData = cloneData.filter(father => {
    const branchArr = cloneData.filter(child => {
      // 返回每一项的子级数组
      return father[id] === child[parentId]
    })
    branchArr.length > 0 ? father.children = branchArr : ''
    // 返回第一层
    return father[parentId] === rootId
  })
  return treeData !== '' ? treeData : data
}

总结

• 递归方法虽然代码量少，但是对扁平数据也是有要求的，父级要在子集前，数据必须按父子顺序返回，如果按子父顺序返回则会产生bug
• 双层filter方法虽然代码行数较多，但因为其对数据顺序无要求，所以推荐使用此方法