vue 前端， 树形菜单的回显

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

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; }

　　

   

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

/**  * 构造树型结构数据  * @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);

    },