vue.js 树形结构数据处理的方法整理

在项目开发的过程中，会经常使用树形结构数据，前后端交互都会对数据进行处理，后端返回的数据前端有的时候不能直接使用需要转换，整理了一些项目中用到的处理方法。

将树形节点改为一维数组

js 复制代码

const generateList = (data: any, dataList: any[] = []) => {
  // console.log(data,dataList, 183);
  
  for (let i = 0; i < data?.length; i++) {
    const node = data[i];
    const { id } = node;
    dataList?.push(id);
    if (node.children) {
      generateList(node.children, dataList);
    }
  }
  return dataList
}

data 为要处理的树形结构数组， dataList 为空数组，循环遍历 data 数组，取到节点 id，push 到 dataList 中，得到新数组，如果有子集就继续遍历取节点，这样递归下去就可以得到所有节点的一维数组。

通过节点，查找该节点在树形结构中的路径

js 复制代码

const getPathByKey = (curKey: any[], data: departTree[]) => {
  let single: departTree[] = []; // 记录路径结果
  let result: any = []
  let traverse = (id: number, path: any, data: departTree[]) => {
    if (data?.length === 0) {
      return;
    }
    for (let item of data) {
      path.push(item);
      if (item.id === Number(id)) {
        single = JSON.parse(JSON.stringify(path.map((el: any) => el.id)));
        return;
      }
      const children = Array.isArray(item.children) ? item.children : [];
      traverse(id, path, children); // 遍历子集
      path.pop(); // 回溯
    }
  }
  for (let i = 0; i < curKey.length; i++) {
    traverse(curKey[i], [], data);
    result.push(single)
  }
  return result;
}

data 为树形结构数组， curKey 为节点数组。traverse 方法获取节点路径。循环遍历 curKey，调用 traverse 方法就可获得节点的路径。

重构统计树形数据，修改键值。

js 复制代码

const mapTree = (org: any) => {
  const haveChildren = Array.isArray(org.children) && org.children.length > 0;
  return {
    label: org.egname + ' (' + org.chname + ')',
    value: org.id,
    children: haveChildren ? org.children.map((i: any) => mapTree(i)) : undefined
  }
}

通过 map 函数递归出新的树形数据，定义自己想要的键值。

重新构造树形结构，将空子集且空员工的节点去掉

js 复制代码

const generateTree = (data: any, dataList: any[] = []) => {
    // 将树形数组转变为一维数组
    for (let i = 0; i < data?.length; i++) {
        const node = data[i];
        const { id, pid, name, twname, egname, employees, children } = node;
        dataList.push({ id, pid, name, egname, twname, employees, children });
        if (node.children) {
            generateTree(node.children, dataList);
        }
    }
    // 将一维数组中的空集过滤
    const array = dataList.filter((item: any) => item.employees?.length !== 0 && item.children?.length !== 0)
    // 将过滤后的一维数组重新生成树形结构
    return listToTree(array)
}
/**
 * 列表转为树，pid 值未知
 * @param {*} list 
 * @returns 
 */
function listToTree(list: any[]) {
    let newArray: any[] = [];
    let finalTree: any[] = [];
    let ids: any[] = []; // id 数组
    let pids: any[] = []  // pid 数组
    // 获取列表中所有的 id
    list.forEach((item: any) => {
        ids.push(item.id)
    })
    // 获取列表中所有的 pid
    list.forEach((item: any) => {
        pids.push(item.pid)
    })
    // 获取两者差值, 筛选出 pid 不等于 id 的值，找到父节点 pid
    const res = pids.filter(v => !ids.some((item) => item === v))
    // 根据父节点 pid， 找到父节点数据
    newArray = list.filter((item: any) => res.some((el) => el === item.pid))
    // 构造树函数，data 为要构造的一维数组，parentId 为父节点 pid
    function buildTree(data: any[], parentId: number) {
        let tree: any[] = [];
        data.forEach(node => {
            if (node.pid === parentId) {
                let children = buildTree(data, node.id);
                if (children.length > 0) {
                    node.children = children;
                }
                tree.push(node);
            }
        });
        return tree;
    }
    // 根据父节点数据构造树，考虑到父节点 pid 会有多个，循环遍历数组。
    newArray.forEach((el: any) => {
        finalTree.push(...buildTree(list, el.pid))
    })
    // 因为父节点 pid 有可能有重复，这里做一个去重处理
    var obj = {};
    finalTree = finalTree.reduce((item: any, next: any) => {
            obj[next.id] ? '' : obj[next.id] = true && item.push(next);
            return item;
        }, [])
    
    return finalTree
}

将挂在子集的数据叠加挂到父级上。递归叠加处理

js 复制代码

function getUsersForDepartment(departments: Department[]) {
    // 递归查找部门的所有员工
    function getAllEmployees(node: Department): any[] {
        const employees = [];
        if (node?.employees) {
            employees.push(...node?.employees);
        }
        if (node?.children && node?.children?.length > 0) {
            node.children.forEach((child) => {
                if (getAllEmployees(child)) {
                    employees.push(...getAllEmployees(child));
                }
            });
        }
        return employees;
    }
    // 将子集的数据挂载到父级的 allUsers 
    function findSubUsers(depts: Department[]) {
        depts.forEach(el => {
            el.allUsers = getAllEmployees(el)
            if (el.children && el.children.length > 0) {
                findSubUsers(el.children)
            }
        })
    }
    // 递归增加 allUsers
    findSubUsers(departments)
}