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. nodejs-Path模块

    JavaScript 标准参考教程(alpha) 草稿二:Node.js Path模块 GitHub TOP Path模块 来自<JavaScript 标准参考教程(alpha)>,by ...

  2. 在 Qualys SSL Labs SSL 测试中获得 A+ 评级的秘技 2021 版

    本系列文章将阐述主流应用交付控制器和主流 Web 服务器如何运行 HTTP/2 和 TLSv1.3 协议,以及如何在 SSL Test 中获得 A+ 评级. 请访问原文链接:https://sysin ...

  3. MyBatis Collection小记—— 关联查询、递归查询、多字段关联

    经常会用到mybatis的Collection标签来做级联查询或递归查询,现通过一个伪例来简单的说明一下使用中的关键点: 首先先列出三个表,给出一个场景: 1,角色表 t_role( id,name ...

  4. RHEL 6.5 安装ORACEL11gR2

    1.关闭selinux,用vi /etc/selinux/config selinux=disabled 2.使用yum安装rpm yum -y install compat-db compat-db ...

  5. html如何让input number类型的标签不产生上下加减的按钮(转)

    添加css代码: <style> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit- ...

  6. Apifox(1)比postman更优秀的接口自动化测试平台

    Apifox介绍 Apifox 是 API 文档.API 调试.API Mock.API 自动化测试一体化协作平台,定位 Postman + Swagger + Mock + JMeter.通过一套系 ...

  7. 「Python实用秘技02」给Python函数定“闹钟”

    本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第2期 ...

  8. 二级C复习

    二级C语言 队列 计算队列中元素个数 种 : rear > front ,直接减 第二种: rear < front 上面两种综合一起,求元素个数公式 :(r - f + maxsize) ...

  9. HTTP隧道解决的问题

    转自别人的文章:https://blog.csdn.net/gogzf/article/details/78385506 客户端通常会用 Web 代理服务器代表它们来访问 Web 服务器.比如,很多公 ...

  10. 返回记录中的指定内容Record.Field…(Power Query 之 M 语言)

    返回指定字段: = Record.Field( 记录, "字段名") = Record.FieldOrDefault( 记录, "字段名", 找不到时返回的值) ...