vue 前端， 树形菜单的回显

 

function listToTree(data) {
  // 使用对象重新存储数据, 空间换时间
  let map = {};
  // treeData存储最后结果
  let treeData = [];
  // 遍历原始数据data，存到map中，id为key，值为数据
  for (let i = 0; i < data.length; i++) {
    map[data[i].id] = data[i];
  }
  // 遍历对象
  for (let i in map) {
    // 根据 parentId 找到的是父节点
    if (map[i].parentId) {
      if (!map[map[i].parentId].children) {
        map[map[i].parentId].children = [];
      }
      // 将子节点放到父节点的 children中
      map[map[i].parentId].children.push(map[i]);
    } else {
      // parentId 找不到对应值，说明是根结点，直接插到根数组中
      treeData.push(map[i]);
    }
  }
  return treeData;
}

　　

   

/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 * @param {*} rootId 根Id 默认 0
 */
 function handleTree(data, id, parentId, children, rootId) {
  id = id || 'id'
  parentId = parentId || 'parentId'
  children = children || 'children';
  console.log(children);
  rootId = rootId || 0
  // 对源数据深度克隆
  debugger;
  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 : '';
    // 上面注释的是源代码的写法, 这里有些问题, js 里面使用 `对象.属性`访问对象的属性, 最终会转化为 `对象['属性']`的形式, 所以这里写法会导致无论 children 传入任意参数, 最终结果都是 children, 而不是传入的
    branchArr.length > 0 ? father[children] = branchArr : '';
    return father[parentId] === rootId
  });
  return treeData != '' ? treeData : data
}

　　

 

 

//树菜单回显(多级) ---树结构往上找key路径 

    changeDetSelect(key, treeData) {

      let arr = []; // 在递归时操作的数组

      let returnArr = []; // 存放结果的数组

      let depth = 0; // 定义全局层级

      // 定义递归函数

      function childrenEach(childrenData, depthN) {

        for (var j = 0; j < childrenData.length; j++) {

          depth = depthN; // 将执行的层级赋值 到 全局层级

          arr[depthN] = childrenData[j].id;

          if (childrenData[j].id == key) {

            returnArr = arr.slice(0, depthN + 1); //将目前匹配的数组，截断并保存到结果数组，

            break;

          } else {

            if (childrenData[j].children) {

              depth++;

              childrenEach(childrenData[j].children, depth);

            }

          }

        }

        return returnArr;

      }

      return childrenEach(treeData, depth);

    },