首页 > 其他分享 >封装公共方法:扁平数组转为树形数组

封装公共方法:扁平数组转为树形数组

时间:2022-12-23 13:45:40浏览次数:70  
标签:封装 res pid arrToTree item 树形 数组 const

代码

src/utils/arr.js

/**
 *
 * @param {Array} flatArr 扁平数据
 * @param {string} pid 上级数据的id,常用'pid'
 * @returns
 */
// 扁平数组转为树形数组
export function arrToTree(flatArr, pid) {
  const res = []
  const map = flatArr.reduce((res, v) => (res[v.id] = v, v.children = [], res), {})
  for (const item of flatArr) {
    if (item[pid] === 0) {
      res.push(item)
      continue
    }
    if (item[pid] in map) {
      const parent = map[item[pid]]
      parent.children = parent.children || []
      parent.children.push(item)
    }
  }
  return res
}

main.js

import { arrToTree } from '@/utils/arr'
// 全局挂载
Vue.prototype.arrToTree = arrToTree

使用
this.nodeData = this.arrToTree(this.nodeArr, 'pid')

参考链接

数组转换成树形结构

标签:封装,res,pid,arrToTree,item,树形,数组,const
From: https://www.cnblogs.com/shayloyuki/p/17000490.html

相关文章

  • pandas数组用法Series、DataFrame二维框架、逻辑判断query、~翻转、高阶函数iloc和loc
    importpandasaspd#生成数组print(pd.Series([1,2,3,4]))print("1,------------")#查看索引信息print(pd.Series([1,2,3,4]).index)print("2,----------")#有定......
  • mfc封装cef浏览器 关闭整个窗口程序得时候又重启mfc 应用的程序
    最近使用mfc做了一个cef得浏览器多标签得。当使用这个封装得浏览器一段时间之后(超过1分钟2分钟)当关闭封装得浏览器整个窗体x得时候,整个窗体又重新弹了出来。大概现象......
  • 3.数组
    一、数组的概述数组本身是引用数据类型,而数组中的元素可以是任何数据类型,包括基本数据类型和引用数据类型。数组的长度一旦确定,就不能修改。连续空间二、一维数组1.声明一......
  • 二维数组,卖股票
    int[][]dp=newint[n][2]int[i][0]第i天不持仓收益int[i][1]第i天持仓收益BM81 买卖股票的最好时机(二) 描述假设你有一个数组prices,长度为n,其中prices[i]是......
  • 块状数组简述
    参考资料:分块思想是一种广泛的思想,树状数组与线段树实际上都是使用了该种思想。但是,在实际问题中,我们常常会遇到一些更为灵活的问题,用线段树或者树状数组并不是那么好用。......
  • JavaScript 数组结构与树结构的转换
    前言作为前端开发的同学,在与后端进行数据联调的时候,我们前端的同学处理Array数组结构的数据是最多的,list、table、card各种需要遍历的展示显示我们都会用数组来处理。当数......
  • Java抽象和封装
    如何从现实生活中抽象出类?从对象中抽出类:1.发现对象的种类2.发现对象的属性(特征)3.发现对象的方法(行为)提示:从对象中抽象出来的类,都可以创建这些对象访问修饰符:p......
  • Vue的指令,在项目中封装了哪些常用指令?
    在vue中我们可以使用Vue.directive()方法注册全局指令。也可以只用directives选项注册局部指令。输入框防抖指令v-debounceconstdebounce={inserted:fu......
  • python 数组字典转换
    将提交的数组字段一个字典 [ { "name":"name1", "age":"1", }, { "name":"name2", "age":"2", } ]#变成{ "name":"name1,name2",......
  • 【ES6新特性】一行代码解决:搜索对象数组,匹配具体字段属性值的返回值和索引的问题
    arr.find(v=>v.key=="需要搜索的值")//返回搜索匹配字段属性值的对象arr.findIndex(v=>v.key=="需要搜索的值")//返回匹配项的索引值......