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 ...
随机推荐
- 17. yum
https://www.linuxidc.com/Linux/2015-04/116331.htm
- 【leetcode】1217. Minimum Cost to Move Chips to The Same Position
We have n chips, where the position of the ith chip is position[i]. We need to move all the chips to ...
- Netty实现Socket
Netty实现Socket 从Java1.4开始, Java引入了non-blocking IO,简称NIO.NIO与传统socket最大的不同就是引入了Channel和多路复用selector的概念 ...
- [学习总结]4、Android的ViewGroup中事件的传递机制(一)
本文主要针对dispatchTouchEvent,onInterceptTouchEvent,onTouchEvent三个方法,通过简单的例子来简单的介绍下. 根据字面意思的理解,dispatchTo ...
- 【Linux】【Shell】【Basic】文件查找locate,find
1.locate: 1.1. 简介:依赖于事先构建好的索引库: 系统自动实现(周期性任务): 手动更新数据库(updatedb): 1.2. 工作特性:查找速度快:模糊 ...
- Ajax请求($.ajax()为例)中data属性传参数的形式
首先定义一个form表单: <form id="login" > <input name="user" type="text&quo ...
- 【C/C++】string的长度
一般用 s.length() s.size() 两种 size也可以用于vector string和vector的区别 string输入直接cin vector一般类似压栈pushback 输入一般是 ...
- 机器学习——sklearn中的API
import matplotlib.pyplot as pltfrom sklearn.svm import SVCfrom sklearn.model_selection import Strati ...
- SQLserver 2014使用Convert()函数获取时间
select convert(char(100),GetDate(),120) as Date 第3个参数就是用来设置日期类型数据的显示样式的,下面介绍几种样式的参数 SELECT CONVERT(v ...
- 腾讯新闻基于 Flink PipeLine 模式的实践
摘要 :随着社会消费模式以及经济形态的发展变化,将催生新的商业模式.腾讯新闻作为一款集游戏.教育.电商等一体的新闻资讯平台.服务亿万用户,业务应用多.数据量大.加之业务增长.场景更加复杂,业务对实时 ...