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 ...
随机推荐
- adjust, administer
adjust to just, exact. In measurement technology and metrology [度量衡学], calibration [校准] is the compa ...
- day01 前端bootstrap框架
day01 django框架之bootstrap框架 今日内容概要 前端框架之bootstrap 该框架支持cv编写前端页面 利用socket模块编写一个简易版本的web框架 利用wsgiref模块编 ...
- day6 基本数据类型及内置方法
day6 基本数据类型及内置方法 一.10进制转其他进制 1. 十进制转二进制 print(bin(11)) #0b1011 2. 十进制转八进制 print(hex(11)) #0o13 3. 十进 ...
- 14. GLIBCXX_3.4.9' not found - 解决办法
在Linux中安装交叉编译器arm-linux-gcc 4.4.3,然后编译mini2440内核出错: /usr/lib/libstdc++.so.6: version GLIBCXX_3.4.9' ...
- Linux系统信息查看命令(ZZ)
http://hi.baidu.com/thinkdifferent/blog/item/22f4a80161630e011d958384.html转自一个baidu师兄的博客,很好的一个总结,推荐下 ...
- ssm-book 整合案例
一:环境及要求 环境: IDEA最新版 MySQL 5.7.19 Tomcat 9 Maven 3.6 要求: 需要掌握 MyBatis:Spring:SpringMVC:MySQL数据库 ...
- 【Linux】【Basis】用户、组和权限管理
1. 概念: 1.1. 每个使用者都有,用户标识UID和密码:并且有身份(Authentication),授权(Authorization),审计(Audition):组(用户组,用户容器) 1.2. ...
- Mysql配置文件 4c8g优化
目录 一.说明 二.配置 一.说明 以下配置适合4核8G及以下的配置,会让性能稍微提高1/3左右. 测试语句 mysqlslap -uroot -p123456 --concurrency=100 - ...
- 数据挖掘实战 - 天池新人赛o2o优惠券使用预测
数据挖掘实战 - o2o优惠券使用预测 一.前言 大家好,家人们.今天是2021/12/14号.上次更新是2021/08/29.上篇文章中说到要开两个专题,果不其然我鸽了,这一鸽就是三个多月.今天,我 ...
- setsockopt()用法及参数详解
setsockopt()用法(参数详细说明) int setsockopt(SOCKET s,int level,int optname,const char* optval,int optlen); ...