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. 一个神奇的JS混淆,JSFuck!

    JSFuck,整体由6个字符[, ], (, ), !, +组成,但却是可以正常运行的JS代码,JSFuck程序可以在任何Web浏览器或引擎中运行解释JavaScript! 看一段代码,源代码为:do ...

  2. 大数据学习day19-----spark02-------0 零碎知识点(分区,分区和分区器的区别) 1. RDD的使用(RDD的概念,特点,创建rdd的方式以及常见rdd的算子) 2.Spark中的一些重要概念

    0. 零碎概念 (1) 这个有点疑惑,有可能是错误的. (2) 此处就算地址写错了也不会报错,因为此操作只是读取数据的操作(元数据),表示从此地址读取数据但并没有进行读取数据的操作 (3)分区(有时间 ...

  3. 大数据学习day14-----第三阶段-----scala02------1. 元组 2.类、对象、继承、特质 3.函数(必须掌握)

    1. 元组 映射是K/V对偶的集合,对偶是元组的最简单的形式,元组可以装着多个不同类型的值 1.1 特点 元组相当于一个特殊的数组,其长度和内容都可变,并且数组中可以装任何类型的数据,其主要用处就是存 ...

  4. celery开启worker报错django.core.exceptions.ImproperlyConfigured: Requested setting INSTALLED_APPS, but settings are not configured. You must either define the environment variable DJANGO_SETTINGS_MODULE o

    其实挺简单的问题,但花了自己一个下午来解决,先是浏览各种博客,无果:没办法,然后去看celery官方文档,无果,近乎绝望,最后仔细看代码,找到问题所在(如下),自学狗这效率...... 下面是自己ta ...

  5. Node.js 概述

    JavaScript 标准参考教程(alpha) 草稿二:Node.js Node.js 概述 GitHub TOP Node.js 概述 来自<JavaScript 标准参考教程(alpha) ...

  6. 【leetcode】85. Maximal Rectangle(单调栈)

    Given a rows x cols binary matrix filled with 0's and 1's, find the largest rectangle containing onl ...

  7. 时光网内地影视票房Top100爬取

    为了和艺恩网的数据作比较,让结果更精确,在昨天又写了一个时光网信息的爬取,这次的难度比艺恩网的大不少,话不多说,先放代码 # -*- coding:utf-8 -*-from __future__ i ...

  8. Rust 总章

    1.1 Rust安装 3.5 Rust Generic Types, Traits, and Lifetimes 3.6 String 与 切片&str的区别 https://openslr. ...

  9. oralce 存储过程传入 record 类型的参数?

    先定义一个 package , package中含有一个 record 类型的变量 create or replace package pkg_record is type emp_record is ...

  10. 初步接触Linux命令

    目录 虚拟机快照 1.首先将已经运行的系统关机 2.找到快照 拍摄快照 3.找到克隆 下一步 有几个快照会显示几个 4.克隆完成后 要修改一下IP 不然无法同时运行两个虚拟机系统 系统介绍 1.pin ...