vue树形结构数据处理的方法总结

 更新时间:2023年11月30日 11:44:54   作者:佛系菇凉  
在项目开发的过程中,会经常使用树形结构数据,前后端交互都会对数据进行处理,后端返回的数据前端有的时候不能直接使用需要转换,本文小编整理了一些项目中用到的处理方法,需要的朋友可以参考下
  • 将树形节点改为一维数组
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 中,得到新数组,如果有子集就继续遍历取节点,这样递归下去就可以得到所有节点的一维数组。

  • 通过节点,查找该节点在树形结构中的路径
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 方法就可获得节点的路径。

  • 重构统计树形数据,修改键值。
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 函数递归出新的树形数据,定义自己想要的键值。

  • 重新构造树形结构,将空子集且空员工的节点去掉
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
}
  • 将挂在子集的数据叠加挂到父级上。递归叠加处理
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)
}

以上就是vuejs树形结构数据处理的方法总结的详细内容,更多关于vuejs树形结构数据处理的资料请关注脚本之家其它相关文章!

相关文章

  • Vue用Export2Excel导出excel,多级表头数据方式

    Vue用Export2Excel导出excel,多级表头数据方式

    这篇文章主要介绍了Vue用Export2Excel导出excel,多级表头数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • crypto-js对称加密解密的使用方式详解(vue与java端)

    crypto-js对称加密解密的使用方式详解(vue与java端)

    这篇文章主要介绍了如何在Vue前端和Java后端使用crypto-js库进行AES加密和解密,前端通过创建AES.js文件来实现加密解密功能,并在Vue文件或JavaScript中使用,后端则可以直接使用Java代码进行AES加密和解密操作,需要的朋友可以参考下
    2025-01-01
  • 使用Vue实现一个树组件的示例

    使用Vue实现一个树组件的示例

    这篇文章主要介绍了使用Vue实现一个树组件的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • Vue SPA首屏加载缓慢问题解决方案

    Vue SPA首屏加载缓慢问题解决方案

    这篇文章主要介绍了Vue SPA首屏加载缓慢问题解决方案,首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容
    2023-03-03
  • vue使用pdfjs-dist+fabric实现pdf电子签章的思路详解

    vue使用pdfjs-dist+fabric实现pdf电子签章的思路详解

    最近领导提了一个新需求:仿照e签宝,实现pdf电子签章,本文给大家介绍vue使用pdfjs-dist+fabric实现pdf电子签章的思路,感兴趣的朋友一起看看吧
    2023-12-12
  • 详解Vue中的自定义指令

    详解Vue中的自定义指令

    这篇文章主要介绍了Vue中的自定义指令的相关资料,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • vue使用动态添加路由(router.addRoutes)加载权限侧边栏的方式

    vue使用动态添加路由(router.addRoutes)加载权限侧边栏的方式

    这篇文章主要介绍了vue使用动态添加路由(router.addRoutes)加载权限侧边栏的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue打包优化之生产环境删除console日志配置

    Vue打包优化之生产环境删除console日志配置

    这篇文章主要为大家介绍了Vue打包优化之生产环境删除console日志配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Element中Slider滑块的具体使用

    Element中Slider滑块的具体使用

    这篇文章主要介绍了Element中Slider滑块的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue3.0中使用websocket,封装到公共方法的实现

    vue3.0中使用websocket,封装到公共方法的实现

    这篇文章主要介绍了vue3.0中使用websocket,封装到公共方法的实现,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论