若依中将平面数据转换为树形结构

实现效果

处理的公共方法

/**
 * 构造树型结构数据
 * @param {*} data data 是原始数据数组
 * @param {*} id id字段 数据项的唯一标识符字段名，默认 'id'
 * @param {*} parentId 父节点标识符字段名，默认 'parentId'
 * @param {*} children 子节点列表字段名 默认 'children'
 */
export function handleTree(data, id, parentId, children) {
  let config = {
    id: id || 'id',
    parentId: parentId || 'parentId',
    childrenList: children || 'children'
  };

  var childrenListMap = {}; //存储每个节点的子节点列表
  var nodeIds = {}; //存储节点的ID和节点数据的映射关系
  var tree = []; //存储最终的树形结构
  // ①构建父子节点的映射关系
  for (let d of data) {
    let parentId = d[config.parentId];
    if (childrenListMap[parentId] == null) {
      childrenListMap[parentId] = [];
    }
    nodeIds[d[config.id]] = d;
    childrenListMap[parentId].push(d);
  }

  // ②找到所有根节点
  // 找根节点，即节点的父节点，如果一个节点的父节点ID在 nodeIds 中不存在，则认为它是根节点，将其添加到 tree 数组中
  for (let d of data) {
    let parentId = d[config.parentId];
    if (nodeIds[parentId] == null) {
      tree.push(d);
    }
  }

  // ③递归地为每个节点添加子节点列表
  for (let t of tree) {
    adaptToChildrenList(t);
  }

  function adaptToChildrenList(o) {
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]];
    }
    if (o[config.childrenList]) {
      for (let c of o[config.childrenList]) {
        adaptToChildrenList(c);
      }
    }
  }
  return tree;
}

调用方法

// response为接口返回数据
menuList.value = handleTree(response.data, "id", "fid");