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. 从Redis分布式缓存实战入手到底层原理分析、面面俱到覆盖大厂面试考点

    概述 官方说明 Redis官网 https://redis.io/ 最新版本6.2.6 Redis中文官网 http://www.redis.cn/ 不过中文官网的同步更新维护相对要滞后不少时间,但对 ...

  2. Web安全学习二

    目录 常见漏洞攻防 SQL注入 注入分类 按技巧分类 按获取数据的方式分类 注入检测 权限提升 数据库检测 绕过技巧 CheatSheet SQL Server Payload MySQL Paylo ...

  3. ORACLE lag,lead

    oracle中想取对应列前几行或者后几行的数据时可以使用lag和lead分析函数 lag:是滞后的意思,表示本行数据是要查询的数据后面,即查询之前行的记录. lead:是领队的意思,表示本行数据是要查 ...

  4. 【编程思想】【设计模式】【基础模式Fundamental】delegation_pattern

    Python版 https://github.com/faif/python-patterns/blob/master/fundamental/delegation_pattern.py #!/usr ...

  5. Springboot Oauth2 集成Swagger2权限验证实战

    Swagger是什么?能干什么?在这就不展开讲解了.本文主要讲解如何集成OAuth2的Password模式权限验证,验证接口是否具有权限. 引入依赖 <dependency> <gr ...

  6. Spring事务隔离级别和传播特性(转)

    相信每个人都被问过无数次Spring声明式事务的隔离级别和传播机制吧!今天我也来说说这两个东西. 加入一个小插曲,一天电话里有人问我声明式事务隔离级别有哪几种,我就回答了7种,他问我Spring的版本 ...

  7. centos7 docker 修改Nginx文件

    1.docker 安装 nginx : docker安装Nginx还是很简单的,可以参考百度文章 ,或者参照docker安装mysql :https://www.cnblogs.com/jonrain ...

  8. 解决在进行socket通信时,一端输出流OutputStream不关闭,另一端输入流就接收不到数据

    输出的数据需要达到一定的量才会向另一端输出,所以在传输数据的末端添加 \r\n 可以保证不管数据量是多少,都立刻传输到另一端.

  9. SpringMvc分析

    1.用户单击某个请求路径,发起一个request请求,此请求会被前端控制器(DispatcherServlet)处理 2.前端控制器(DispatcherServlet)请求处理器映射器(Handle ...

  10. ss命令用来显示处于活动状态的套接字信息。

    ss命令用来显示处于活动状态的套接字信息.ss命令可以用来获取socket统计信息,它可以显示和netstat类似的内容.但ss的优势在于它能够显示更多更详细的有关TCP和连接状态的信息,而且比net ...