vue递归过滤树结构数组
let arr=[{
                    title:'1',
                    key:'1',
                    type:0,
                    children:[{
                        title:'1-1',
                        key:'1-1',
                        type:0,
                    }]
                },{
                    title:'2',
                    key:'2',
                    type:0,
                    children:[]
                },{
                    title:'3',
                    key:'3',
                    type:0,
                    children:[{
                        title:'3-1',
                        key:'3',
                        type:0,
                    }]
                },{
                    title:'4',
                    key:'4',
                    type:1,
                    children:[]
                }]
// 过滤出数组type==0的数据
let sul=that.recursiveFilter(arr,0)
/**
* 递归过滤嵌套数组(树形结构)
* @param arr {Array}要过滤的原始数据
* @param type {Boolean} 你要过滤的关键词
*
*/
recursiveFilter(arr,type){
let data=arr.filter(item=> item.type==type).map((item)=>{
item=Object.assign({},item)
if(item.children){
//递归循环
item.children=that.recursiveFilter(item.children,type)
}
return item
})
return data
},
vue递归过滤树结构数组的更多相关文章
- 每天一个JavaScript实例-递归实现反转数组字符串
		
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
 - 从vue渲染想到的数组方法
		
<div id="app"> <ul> <li v-for='item in goods'>{{item}}</li> </u ...
 - C语言  ·  递归倒置字符数组
		
算法提高 递归倒置字符数组 时间限制:1.0s 内存限制:512.0MB 问题描述 完成一个递归程序,倒置字符数组.并打印实现过程 递归逻辑为: 当字符长度等于1时,直接返回 否则, ...
 - vue递归组件的实现
		
本文链接:https://blog.csdn.net/weixin_43756060/article/details/87786344vue递归实现图片上的多级菜单 父级组件结构 <templa ...
 - Vue方法中修改数组某一项元素而不能响应式更新
		
<template> <div> <ul> <li v-for="(item, i) in ms" :key="i"& ...
 - Java实现 蓝桥杯VIP 算法提高 递归倒置字符数组
		
算法提高 递归倒置字符数组 时间限制:1.0s 内存限制:512.0MB 问题描述 完成一个递归程序,倒置字符数组.并打印实现过程 递归逻辑为: 当字符长度等于1时,直接返回 否则,调换首尾两个字符, ...
 - 仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大
		
仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大 1.介绍 先看图  今天在项目中遇到了一个问题,例如我现在需要传一些数据到后端,数组例如是 let arr = [ {" ...
 - 多级级联数据的展示-vue递归组件
		
如果采用普通的for循环方式,没办法确认数据到底有几层,要写几个for循环,所以想到了递归的方法. 那么在vue里然后实现呢? vue递归组件(组件中使用自己) 父组件中把数据以props形式传给子组 ...
 - vue 对 v-for 中数组进行过滤操作
		
之前写angularjs的时候,filter是可以直接在ng-repeat中使用.但是到了vue好像这个不起作用. 具体解决办法: 加一个计算属性: computed:{ filterData: fu ...
 
随机推荐
- 转 Android Studio中Junit调试
			
转:https://blog.csdn.net/xanthus_li/article/details/54314189 在程序开发完成后,需要交给专业的调试人员进行相关的专业调试(白盒测试,黑盒测试, ...
 - Dubbo声明式缓存
			
为了进一步提高消费者对用户的响应速度,减轻提供者的压力,Dubbo提供了基于结果的声明式缓存.该缓存是基于消费者端的,所以使用很简单,只需修改消费者配置文件,与提供者无关 一.创建消费者07-cons ...
 - Spring Boot中使用模板引擎Thymeleaf
			
一.Thymeleaf简介 Thymeleaf[taɪm lif],百里香叶,是一个流行的模板引擎,该模板引擎采用Java语言开发.Java中常见的模板引擎有Velocity.Freemaker.Th ...
 - Linux上用Jexus部署Asp.Net网站:常规部署与Docker部署
			
(一)常规部署 一.把 jexus压缩包下载到linux临时文件夹中. cd /tmp wget linuxdot.net/down/jexus-6.2.x-arm64.tar.gz (不同的操作系统 ...
 - Redis单点到集群迁移
			
目录 一.简介 一.简介 1.环境 源 192.168.1.185的6379 目标 192.168.1.91的7001,7002 192.168.1.92的7003,7004 192.168.1.94 ...
 - 去除爬虫采集到的\xa0、\u3000等字符
			
\xa0表示不间断空白符,爬虫中遇到它的概率不可谓不小,而经常和它一同出现的还有\u3000.\u2800.\t等Unicode字符串.单从对\xa0.\t.\u3000等含空白字符的处理来说,有以下 ...
 - epx中设置断掉调试
			
以前总听师傅们说,做pwn题,多调试,多调试. 师傅都说用gdb,但是我刚接触linux程序调试的时候用的是pwndbg,后来就用顺手了.但是调试一些简单程序还好,直接用pwndbg打开.但是这年头简 ...
 - 【Azure Redis 缓存】Azure Cache for Redis 中如何快速查看慢指令情况(Slowlogs)
			
问题描述 当 Azure Redis 服务器负载过高的情况下,使用时就会遇见连接超时,命令超时,IO Socket超时等异常.为了能定位是那些因素引起的,可以参考微软官方文档( 管理 Azure Ca ...
 - listitems.ListItemCollectionPosition属性为空
			
SPListItemCollection listitems = list1.GetItems(query);//当执行完上面的代码后,listitems.ListItemCollectionPosi ...
 - 5款超实用的.NET性能分析工具
			
虽然.NET框架号称永远不会发生内存泄漏,原因是引入了内存回收机制.但在实际应用中,往往我们分配了对象但没有释放指向该对象的引用,导致对象永远无法释放.最常见的情况就是给对象添加了事件处理函数,但当不 ...