构建Element UI中Tree组件的数据结构

后台返回的数据结构

 

Tree 组件需要的数据结构：

 

自己写的： ===>> 这样递归必须要知道最顶层的对象，然后传入顶层对象一次遍历得到自己目录

data.data.forEach((item, index) => {
  if (item.parentDeptId == 0) { //先将一级组织保存起来
    this.organizationData.push({
      ...item,
      label: item.name
    })
  }
})

let getOrg = (citem) => {
  let children = data.data.filter(item => item.parentDeptId == citem.id).map(
    item => { //获取传进来的item的所有子集
      return Object.assign({}, item, {
        label: item.name
      })
    });
  children.forEach(item => { //遍历子集，获取子集的子集...  ;并赋值给当前子集的children
    item.children = getOrg(item);
  })
  return children; //返回item的子集列表
}

let testLists = getOrg(data.data[0]); //默认传第一级目录

 

框架提供的  ===>> 优点：不要提供顶层对象，只需要提供数组源，id 和 pid 的字段名就可以（即自己的id和父级的id）

/**
 * 树形数据转换
 * @param {*} data
 * @param {*} id
 * @param {*} pid
 */
export function treeDataTranslate (data, id = 'id', pid = 'parentId') {
  var res = []
  var temp = {}
  for (var i = 0; i < data.length; i++) {
    temp[data[i][id]] = data[i]
  }
  for (var k = 0; k < data.length; k++) {
    if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
      if (!temp[data[k][pid]]['children']) {
        temp[data[k][pid]]['children'] = []
      }
      if (!temp[data[k][pid]]['_level']) {
        temp[data[k][pid]]['_level'] = 1
      }
      data[k]['_level'] = temp[data[k][pid]]._level + 1
      temp[data[k][pid]]['children'].push(data[k])
    } else {
      res.push(data[k])
    }
  }
  return res
}

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！