首页 > 其他分享 >vuejs处理树状结构的数据扁平化

vuejs处理树状结构的数据扁平化

时间:2022-12-19 15:34:48浏览次数:49  
标签:attrList childs 扁平化 树状 vuejs attrArr parentId children name

1,有这样一个数据:

 1 data = [
 2         {
 3             "id":1,
 4             "name":"吃喝",
 5             "parentId":0,
 6             "children":[
 7                 {
 8                     "id":2,
 9                     "name":"烧烤",
10                     "parentId":"1",
11                     "children":[]
12                 },
13                 {
14                     "id":5,
15                     "name":"奶茶",
16                     "parentId":"1",
17                     "children":[]
18                 }
19             ]
20         },
21         {
22             "id":3,
23             "name":"玩乐",
24             "parentId":0,
25             "children":[
26                 {
27                     "id":4,
28                     "name":"ktv",
29                     "parentId":"3",
30                     "children":[]
31                 },
32                 {
33                     "id":6,
34                     "name":"棋牌室",
35                     "parentId":"3",
36                     "children":[]
37                 }
38             ]
39         }
40     ]

2,使用函数进行数据扁平化

 1  /**
 2     *
 3     * @param {Array} arrs 树形数据
 4     * @param {string} childs 树形数据子数据的属性名,常用'children'
 5     * @param {Array} attrArr 需要提取的公共属性数组(默认是除了childs的全部属性)(可不写)
 6     * @returns
 7     */
 8    function extractTree(arrs,childs,attrArr){
 9        let attrList = [];
10        if(!Array.isArray(arrs)&&!arrs.length)return [];
11        if(typeof childs !== 'string')return [];
12        if(!Array.isArray(attrArr)||Array.isArray(attrArr)&&!attrArr.length) {
13               attrList = Object.keys(arrs[0]);
14               attrList.splice(attrList.indexOf(childs), 1);
15          }else{
16               attrList = attrArr;
17          }
18         let list = [];
19         const getObj = (arr)=>{
20            arr.forEach(function(row){
21                let obj = {};
22                attrList.forEach(item=>{
23                   obj[item] = row[item];
24         });
25          list.push(obj);
26          if(row[childs]){
27              getObj(row[childs]);
28          }
29         })
30         return list;
31       }
32      return getObj(arrs);
33   }

 

标签:attrList,childs,扁平化,树状,vuejs,attrArr,parentId,children,name
From: https://www.cnblogs.com/fxw1996/p/16992287.html

相关文章

  • vuejs实现一键复制功能
    1,首先安装插件:npminstallclipboard--sava2,在组件中应用 importClipboardfrom'clipboard'3,clipboard的实际使用1<!--第一种直接绑定在按钮上-->2<bu......
  • vuejs实现文件下载的三种方式
    第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单:<a:href='"/路径"'>下载模板</a>另一种情况是创建div标签,动态创建a标签:<div......
  • [附源码]Python计算机毕业设计Django基于vuejs的爱宠用品销售app
    OverridetheentrypointofanimageIntroducedinGitLabandGitLabRunner9.4.Readmoreaboutthe extendedconfigurationoptions.Beforeexplainingtheav......
  • 封装公共方法:树形数组扁平化
    需求项目多个地方需要操作树形数据,多次用递归比较麻烦,于是就打算封装成公共方法。解决第一步:在/src/utils路径下新建arr.js文件/****@param{Array}arrs树......
  • QTreewidget树状列表右击事件
     树状列表右击事件(添加删除修改等操作) 思路:首先我们需要一个voidcontextMenuEvent(QContextMenuEvent*event);管理Menu事件的一个接口此接口为系统自带的,不需......
  • 二维偏序问题与树状数组在其中的运用
    链接:https://ac.nowcoder.com/acm/problem/247068来源:牛客网对于两个序列a,b,求一个l和r使得在min(区间和a,区间和b)最大。发现就是min(sum1[r]-sum1[l-1],sum2[r]-sum2[l-1]......
  • 【数据结构】二维树状数组
    一、二维树状数组二维树状数组,其实就是一维的树状数组上的节点再套个树状数组,就变成了二维树状数组了。constintN=1e3+10;inttr[N][N],n,m;#definelowbit(x......
  • 树状数组统计一个数前面有几个数比它小,有几个数比它大
    很重要的算法,蓝桥杯遇到n次了#include<bits/stdc++.h>#defineintlonglongusingnamespacestd;intn,m;inta[1000010],c[1000010],b[1000010];intlowbit(intx......
  • Queries Gym - 100741A - 树状数组
    给定\(n\)和\(m\),对于\(n\)个数字\(a_i\),进行下列三种操作:(1)+pr:将p位置的元素加上r,输出此时p位置的值;(2)-pr:将p位置的元素减去r,若p位置的值小......
  • js数组扁平化 flat
    Array.prototype.flat()flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。constarr1=[0,1,2,[3,4]......