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框架号称永远不会发生内存泄漏,原因是引入了内存回收机制.但在实际应用中,往往我们分配了对象但没有释放指向该对象的引用,导致对象永远无法释放.最常见的情况就是给对象添加了事件处理函数,但当不 ...