小谢第2问:后端返回为数组list时候,怎么实现转为tree
要求后端返回给我的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的更多相关文章
- 小谢第8问:ui框架的css样式如何更改
目前有三种方法, 1.使用scss,增加样式覆盖,但是此种方法要求css的className需要与框架内的元素相一致,因此修改时候需要特别注意,一个父级的不同就可能修改失败 2.deep穿透,这种方法 ...
- 小谢第7问:js前端如何实现大文件分片上传、上传进度、终止上传以及删除服务器文件?
文件上传一般有两种方式:文件流上传和base64方式上传,毫无疑问,当进行大文件上传时候,转为base64是不现实的,因此用formData方式结合文件流,直接上传到服务器 本文主要结合vue的来讲解 ...
- 小谢第10问:前端JS下载文件、表格
对于小型文件及表格下载,一般采用a标签形式 <buttonb @click="downloadTemplate()">模板下载</button> downl ...
- 小谢第36问:elemet - table表格修改后表格行高亮显示且定位到当前行当前页
第一次做这个需求得时候很乱,总是在表格页和修改页徘徊,总觉得什么都会,但是就是做不出自己想要得效果 其实如果先把思路搞清楚,这个问题得知识点却是不多,以下是我对表格高亮显示得思路: 首先,我会从已知得 ...
- 小谢第37问:关于websocket推送进度,本地保存进度条,然后跳出页面进入后再显示的问题
1.主要技术点:sessionStorage 会话存储进度 这里在使用之前,顺便说一下cookie.sessionStorage.localStorage 共同点:都是保存在浏览器端,且同源的. 区别 ...
- 小谢第6问:js中,filter函数是怎么使用的
数组的常用方法filter,今天在做数组筛选的时候用到需要将有重复的数组去除,因此用到这个函数,主要用到-- 选择需要的属性,最终留下想要的数组,如果刚开始的话可以看下下面代码 let nums = ...
- 小谢第1问:为什么要写blog
一直犹豫了好久,终于在csdn上弄好了自己的博客账号,感谢平台,以后在工作的过程中,遇到不懂得问题,解决后,会在这里记录下自己所遇到的问题
- 小谢第23问: chorme的性能优化工具
问题场景:在前端日趋工程化的今天,前端性能优化是一名合格的前端工程师必备的技能,那么,如何正确的使用性能分析工具呢? 解决方案: 性能分析的流程: 在开发中我一般使用公司开发的测试脚本-kbase-w ...
- 小谢第50问:vuex的五个属性-使用-介绍
一.Vuex 是什么? 官网:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 关键词:状态 ...
随机推荐
- js+css制作简单的轮播图带有定时功能
用纯css和JavaScript代码制作带有定时轮播功能的轮播图 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- vue-infinite-scroll------vue的无线滚动插件
vue-infinite-scroll------vue的无线滚动插件 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 V ...
- http协议跟tcp协议的简单理解
在说明这两个协议之前,我们先简单说一下网络的分层. 1)应用层 支持网络应用,应用协议仅仅是网络应用的一个组成部分,运行在不同主机上的进程则使用应用层协议进行通信.主要的协议有:http.ftp.te ...
- SpringCloud (一) :微服务架构
什么是微服务架构 简而言之,微服务架构风格就是将单一应用的开发分为多个小的服务,每个小的服务在自己的进程中运行并使用轻量级机制进行通信(通常是一个HTTP API源),这些服务围绕业务性能进行构建,并 ...
- 【Scala】Actor并发编程实现单机版wordCount
文章目录 对单个文本文件进行单词计数 对多个文本文件进行单词计数 对单个文本文件进行单词计数 import scala.actors.Actor import scala.io.Source //读取 ...
- STM32 Bootloader基于ymodem传输协议串口IAP升级详解
硬件:stm32f103cbt6 软件:STM32F10x_StdPeriph_Lib_V3.5.0 文章目录 1 预备知识 2 Bootloader 2.1 启动流程 2.2 校验跳转地址是否有效 ...
- 移动端H5支付(微信和支付宝)
我们直接进入主题吧,先说功能: 1.用户通过我们的页面输入充值帐号和金额调起支付(微信或者支付宝),支付成功返回获取支付结果. 2.微信支付成功后重定向到指定页面(没有设置重定向地址的话,默认返回调起 ...
- UEFI Shell --常用命令解释
UEFI Shell解释 UEFI Shell 是一个提供用户和UEFI系统之间的接口,进入UEFI Shell可以对计算机系统进行配置 命令解释: 单独的help就可以输出所有指令,不做特殊说明,内 ...
- AFNetworking 3.0 使用详解 和 源码解析实现原理
AFN原理&& AFN如何使用RunLoop来实现的: 让你介绍一下AFN源码的理解,首先要说说封装里面主要做了那些重要的事情,有那些重要的类(XY题) 一.AFN的实现步骤: NSS ...
- 接口testing需要的技能
1.什么是接口测试? 定义:测试系统组件间接口的一种测试.主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点,重点是检查数据的交换,传递和控制管理过程,以及系统间的相互逻辑依赖关系等: 目的 ...