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递归过滤树结构数组的更多相关文章

  1. 每天一个JavaScript实例-递归实现反转数组字符串

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 从vue渲染想到的数组方法

    <div id="app"> <ul> <li v-for='item in goods'>{{item}}</li> </u ...

  3. C语言 · 递归倒置字符数组

    算法提高 递归倒置字符数组   时间限制:1.0s   内存限制:512.0MB      问题描述 完成一个递归程序,倒置字符数组.并打印实现过程 递归逻辑为: 当字符长度等于1时,直接返回 否则, ...

  4. vue递归组件的实现

    本文链接:https://blog.csdn.net/weixin_43756060/article/details/87786344vue递归实现图片上的多级菜单 父级组件结构 <templa ...

  5. Vue方法中修改数组某一项元素而不能响应式更新

    <template> <div> <ul> <li v-for="(item, i) in ms" :key="i"& ...

  6. Java实现 蓝桥杯VIP 算法提高 递归倒置字符数组

    算法提高 递归倒置字符数组 时间限制:1.0s 内存限制:512.0MB 问题描述 完成一个递归程序,倒置字符数组.并打印实现过程 递归逻辑为: 当字符长度等于1时,直接返回 否则,调换首尾两个字符, ...

  7. 仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大

    仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大 1.介绍 先看图 ​ 今天在项目中遇到了一个问题,例如我现在需要传一些数据到后端,数组例如是 let arr = [ {" ...

  8. 多级级联数据的展示-vue递归组件

    如果采用普通的for循环方式,没办法确认数据到底有几层,要写几个for循环,所以想到了递归的方法. 那么在vue里然后实现呢? vue递归组件(组件中使用自己) 父组件中把数据以props形式传给子组 ...

  9. vue 对 v-for 中数组进行过滤操作

    之前写angularjs的时候,filter是可以直接在ng-repeat中使用.但是到了vue好像这个不起作用. 具体解决办法: 加一个计算属性: computed:{ filterData: fu ...

随机推荐

  1. A Child's History of England.21

    There was one tall Norman Knight who rode before the Norman army on a prancing horse, throwing up hi ...

  2. Qt5的安装和编译

    Ubuntu18.04安装Qt5 1.配置unbuntu 和宿主机共享文件夹安装vmware-tools 2.下载 Qt  http://download.qt.io/archive/qt/ 3.修改 ...

  3. Java读文件写入kafka

    目录 Java读文件写入kafka 文件格式 pom依赖 java代码 Java读文件写入kafka 文件格式 840271 103208 0 0.0 insert 84e66588-8875-441 ...

  4. SparkStreaming消费Kafka,手动维护Offset到Mysql

    目录 说明 整体逻辑 offset建表语句 代码实现 说明 当前处理只实现手动维护offset到mysql,只能保证数据不丢失,可能会重复 要想实现精准一次性,还需要将数据提交和offset提交维护在 ...

  5. HGAME2021 week3 pwn writeup

    一共放出五道题,都不是很难. blackgive 考栈转移,值得注意的一点是转移过去先填充几个ret,因为如果直接在转移过去的地方写rop链,执行起来会覆盖到上面的一些指针,导致程序不能正常输入和输出 ...

  6. MySQL管理之道,性能调优,高可用与监控(第二版)pdf下载

    MySQL管理之道,性能调优,高可用与监控(第二版) 书中内容以实战为导向,所有内容均来自于笔者多年实践经验的总结和新知识的拓展,同时也针对运维人员.DBA等相关工作者会遇到的有代表性的疑难问题给出了 ...

  7. CF999C Alphabetic Removals 题解

    Content 给定一个长度为 \(n\) 的仅含小写字母的字符串,执行 \(k\) 次如下操作: 如果字符串中有 a 这个字母,删除从左往右第一个 a,并结束操作,否则继续操作: 如果字符串中有 b ...

  8. Spring支持的常用数据库传播属性和事务隔离级别

    一.事务的传播属性 1.propagation:用来设置事务的传播行为,一个方法运行在了一个开启了事务的方法中时,当前方法是使用原来的事务还是开启一个新的事务. (1)propagation.REQU ...

  9. C++字符串常量跨平台编译问题

    C++字符串常量跨平台编译问题(与字符串编码相关),有需要的朋友可以参考下. 1. 问题 在C++代码中,给一个string类型的变量赋值一个中文字符串常量,例如: string s = " ...

  10. C(++)判断文件是否存在

    代码 核心代码 /// 判断文件是否存在 bool is_exist_file_(std::string&& str_file) { struct stat st; return (0 ...