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树形结构数据处理的资料请关注脚本之家其它相关文章!

相关文章

  • element el-table表格的二次封装实现(附表格高度自适应)

    element el-table表格的二次封装实现(附表格高度自适应)

    这篇文章主要介绍了element el-table表格的二次封装实现(附表格高度自适应),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • VUE 解决mode为history页面为空白的问题

    VUE 解决mode为history页面为空白的问题

    今天小编就为大家分享一篇VUE 解决mode为history页面为空白的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue中使用 pako.js 解密 gzip加密字符串的方法

    vue中使用 pako.js 解密 gzip加密字符串的方法

    这篇文章主要介绍了vue项目中 使用 pako.js 解密 gzip加密字符串 的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • Vue项目部署后首页白屏问题排查与解决方法

    Vue项目部署后首页白屏问题排查与解决方法

    在部署 Vue.js 项目时,有时会遇到首页加载后出现白屏的情况,这可能是由于多种原因造成的,本文将介绍一些常见的排查方法和解决方案,帮助开发者快速定位问题并解决,感兴趣的小伙伴跟着小编一起来看看吧
    2024-08-08
  • vue2.0的计算属性computed和watch的区别及各自使用场景解读

    vue2.0的计算属性computed和watch的区别及各自使用场景解读

    这篇文章主要介绍了vue2.0的计算属性computed和watch的区别及各自使用场景,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue组件间的样式冲突污染问题详解

    Vue组件间的样式冲突污染问题详解

    默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题。导致组件之间样式冲突的根本原因,我们接下来探究一下
    2022-11-11
  • vue toggle做一个点击切换class(实例讲解)

    vue toggle做一个点击切换class(实例讲解)

    下面小编就为大家分享一篇使用vue toggle实现点击切换class的示例。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue和react中关于插槽详解

    vue和react中关于插槽详解

    这篇文章主要介绍了vue和react中关于插槽详解,slot插槽是Vue对组件嵌套这种扩展机制的称谓,在react可以也这样称呼,但是并不很常见。不过叫slot确实很形象
    2022-08-08
  • Vue中如何获取json文件中的数据

    Vue中如何获取json文件中的数据

    访问百度音乐API需要传递音乐类型参数,而这些参数是存在musictype.json中,现在在组件listcate.vue需要获取json数据,如何实现呢,下面小编给大家带来了Vue中如何获取json文件中的数据,感兴趣的朋友一起看看吧
    2022-09-09
  • vue3 find 数组查找的几种实现方式

    vue3 find 数组查找的几种实现方式

    在Vue3中,如果你想使用find方法来查找数组中的元素,你可以直接在模板中使用该方法,或者在计算属性或方法中实现,下面就来介绍几种不同的使用方式,感兴趣的可以了解一下
    2025-11-11

最新评论