要求后端返回给我的list时候,在数组中定义有id , parentid,  可以用双重循环的方法,得到tree需要的数据结构,这样得到的数据就可以直接复制给树组件的data啦
const oldData = [
{id:1,name:'boss',parentId:0},
{id:2,name:'lily',parentId:1},
{id:3,name:'jack',parentId:1},
{id:4,name:'john',parentId:2},
{id:5,name:'boss2',parentId:0},
] function listToTree(oldArr){
oldArr.forEach(element => {
let parentId = element.parentId;
if(parentId !== 0){
oldArr.forEach(ele => {
if(ele.id == parentId){ //当内层循环的ID== 外层循环的parendId时,(说明有children),需要往该内层id里建个children并push对应的数组;
if(!ele.children){
ele.children = [];
}
ele.children.push(element);
}
});
}
});
console.log(oldArr) //此时的数组是在原基础上补充了children;
oldArr = oldArr.filter(ele => ele.parentId === 0); //这一步是过滤,按树展开,将多余的数组剔除;
console.log(oldArr)
return oldArr;
}
listToTree(oldData);

小谢第2问:后端返回为数组list时候,怎么实现转为tree的更多相关文章

  1. 小谢第8问:ui框架的css样式如何更改

    目前有三种方法, 1.使用scss,增加样式覆盖,但是此种方法要求css的className需要与框架内的元素相一致,因此修改时候需要特别注意,一个父级的不同就可能修改失败 2.deep穿透,这种方法 ...

  2. 小谢第7问:js前端如何实现大文件分片上传、上传进度、终止上传以及删除服务器文件?

    文件上传一般有两种方式:文件流上传和base64方式上传,毫无疑问,当进行大文件上传时候,转为base64是不现实的,因此用formData方式结合文件流,直接上传到服务器 本文主要结合vue的来讲解 ...

  3. 小谢第10问:前端JS下载文件、表格

    对于小型文件及表格下载,一般采用a标签形式 <buttonb @click="downloadTemplate()">模板下载</button> downl ...

  4. 小谢第36问:elemet - table表格修改后表格行高亮显示且定位到当前行当前页

    第一次做这个需求得时候很乱,总是在表格页和修改页徘徊,总觉得什么都会,但是就是做不出自己想要得效果 其实如果先把思路搞清楚,这个问题得知识点却是不多,以下是我对表格高亮显示得思路: 首先,我会从已知得 ...

  5. 小谢第37问:关于websocket推送进度,本地保存进度条,然后跳出页面进入后再显示的问题

    1.主要技术点:sessionStorage 会话存储进度 这里在使用之前,顺便说一下cookie.sessionStorage.localStorage 共同点:都是保存在浏览器端,且同源的. 区别 ...

  6. 小谢第6问:js中,filter函数是怎么使用的

    数组的常用方法filter,今天在做数组筛选的时候用到需要将有重复的数组去除,因此用到这个函数,主要用到-- 选择需要的属性,最终留下想要的数组,如果刚开始的话可以看下下面代码 let nums = ...

  7. 小谢第1问:为什么要写blog

    一直犹豫了好久,终于在csdn上弄好了自己的博客账号,感谢平台,以后在工作的过程中,遇到不懂得问题,解决后,会在这里记录下自己所遇到的问题

  8. 小谢第23问: chorme的性能优化工具

    问题场景:在前端日趋工程化的今天,前端性能优化是一名合格的前端工程师必备的技能,那么,如何正确的使用性能分析工具呢? 解决方案: 性能分析的流程: 在开发中我一般使用公司开发的测试脚本-kbase-w ...

  9. 小谢第50问:vuex的五个属性-使用-介绍

    一.Vuex 是什么? 官网:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 关键词:状态 ...

随机推荐

  1. FPGA-中值滤波(1)代码

    module shift_ram_3_8bit #( parameter Ram_Length = 'd640 ) ( clken, clock, shiftin, shiftout, taps0x, ...

  2. 1年之后的拿高工资的资本,Java线程

    只要开启线程,都会开启一块对应的栈内存,然后进行同步执行. -- 谈斌 线程是CPU用来处理程序的资源,线程的执行是抢占式的. 线程开启方式: 创建一个类,继承Thread类.重写 run(), 并在 ...

  3. Web框架,Hibernate向数据库插入数据,数据库没有值怎么办?

    用web框架技术,使用Hibernate向数据库添加信息,控制台显示插入成功的语句,可是数据库却没有值:错误如下: (1)不要自己创建数据库!!,Web框架可以自己自动生成,自己创建可能会报错! (2 ...

  4. 面试官:你说你懂i++跟++i的区别,那你会做下面这道题吗?

    面试官:你说你懂i++跟++i的区别,那你知道下面这段代码的运行结果吗? 面试官:"说一说i++跟++i的区别" 我:"i++是先把i的值拿出来使用,然后再对i+1,++ ...

  5. 王颖奇 201771010129《面向对象程序设计(java)》第一周学习总结

    <面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.com wangyingqi 程序 ...

  6. Linux内核驱动学习(七)应用层直接操作GPIO

    文章目录 简介 原理图 节点 设置为输出 设置为输入 映射关系 debugfs pwm demo 简介 前面通过libgpio的方式介绍了内核空间对GPIO进行操作的接口,其做了较好的封装,同时Lin ...

  7. [hdu4495]二分,字符串hash,DP

    题意:在一个有字母和数字组成的矩形里面找最大的等腰对称直角三角形,直角边分别平行于矩形边,对称的意思是对称轴两边的字符相同. 思路:首先考虑一种情况,三角形的直角边在右方和下方,对于其它情况可以通过旋 ...

  8. mysql 中 innoDB 与 MySAM

    mysql 中 innoDB 与 MyISAM 的特点 --ENGINE = innodb 1.提供事务处理,支持行锁: 2.不加锁读取,增加并发读的用户数量和空间: 3. insert/update ...

  9. 2018-06-25 js表单事件、三个高度和Ajax异步通讯技术

    表单事件: onfocus -> 表单控件得到焦点时触发: obj_ipt.onfocus=function(){}; onblur -> 表单控件失去焦点时: onchange -> ...

  10. 这是一篇致力于解决Linux小白无法安装tunctl工具的文章

    计算机网络——搭建Linux下的实验环境并成功安装tunctl 各位如果是来解决安装tunctl的问题的,请直接到2.2部分的内容. 这个学期终于迎来了计算机网络这门课程,也终于能够进一步了解让我无数 ...