前端多级搜索条件,不走后台

2023-11-18

handleSearch() {
      // 备份数据
     let arr =JSON.parse(JSON.stringify(this.tableData ))
      //form是查询条件, 通过遍历key值来循环处理
      Object.keys(this.form).forEach(e => {
      	 // 调用自己定义好的筛选方法
          arr = this.filterFunc(this.form[e], e, arr)
      })
      // 为表格赋值
      this.tableData = arr
    },  
    // 过滤函数
    filterFunc(val, target, filterArr) {  // val: 查询条件的值,target: 目标参数,就是你这个值对应的key,filterarr: 被筛选的数组
      // 参数不存在或为空时,就相当于查询全部
      if (val == undefined || val == '') return filterArr
      return filterArr.filter(p => p[target].indexOf(val) > -1) // 可以自己加一个.toLowerCase()来兼容一下大小
    },

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端多级搜索条件,不走后台 的相关文章

随机推荐

  • IPv6地址结构、地址分类以及表示方法

    IPv6地址的表示方法 IPv6地址总长度为128比特 通常分为8组 每组为4个十六进制数的形式 每组十六进制数间用冒号分隔 例如 FC00 0000 130F 0000 0000 09C0 876A 130B 这是IPv6地址的首选格式
  • Python从入门到精通,100天就够了!(2)——分支结构与循环结构

    文章目录 一 分支结构 选择结构 1 分支结构初体验 2 分支结构练习 二 循环结构 1 for in 循环 2 for in 循环练习 3 while 循环 4 break和continue 5 while 循环练习 6 嵌套的循环结构
  • 【零基础 快速学Java】韩顺平 p35-51 变量、数据类型(整型,浮点,字符,布尔)、重要编码,API文档

    课程 p35 51 变量 变量是程序的基本组成单位 变量有三个基本要素 类型 名称 值 变量相当于内存中一个数据存储空间的表示 通过变量名可以访问变量 值 四个常用数据类型 int double char String String的S要大
  • LuCI - 网页用户配置界面开发

    luci 参考资料 http luci subsignal org trac wiki Documentation http wiki openwrt org doc techref preinit mount first boot htt
  • 【IOS 开发学习总结-OC-4】objective-c 运算符

    运算符是用于数据运算 赋值和比较等的特殊符号 objective c 语言中的运算符有以下几种 算术运算符 赋值运算符 比较运算符 逻辑运算符 位运算符 类型相关运算符 算术运算符 有7个基本运算符 加法运算符 减法运算符 还可以作为负号使
  • Ubuntu下安装jdk1.7

    转载 http blog csdn net zth1002 article details 51383508 1 去到官网下载jdk 点击打开链接 2 安装WinSCP工具连接到Linux系统上面在 usr lib里面新建一个jvm文件夹
  • UPF与低功耗设计实现实例 -- 附UPF与DC综合脚本

    原文链接 https www eefocus com industrial electronics 473034 本文摘自 数字集成电路低功耗物理实现技术与 UPF 孙轶群 sun yiqun nationz com cn 国民技术股份有限
  • Tomcat Port8009与AJP13协议

    Tomcat最主要的功能是提供Servlet JSP容器 尽管它也可以作为独立的Java Web服务器 它在对静态资源 如HTML文件或图像文件 的处理速度 以及提供的Web服务器管理功能方面都不如其他专业的HTTP服务器 如IIS和Apa
  • java.util.ConcurrentModificationException

    错误类型 java util ConcurrentModificationException 出现原因 在foreach增强循环中进行了元素删除操作 只要是集合这样做都会出现这个问题 ConcurrentModificationExcept
  • Unity 2D人物移动实现

    Unity 2D人物移动实现 效果展示 代码 using System Collections using System Collections Generic using UnityEngine public class Parentne
  • 基础网络故障检测

    基本网络故障检测 背景 随着网络的普遍应用 客户在使用网络时随时随刻会出现网络不通或严重卡顿现象 因如今的网络应用量大且拓扑负责 好的网络故障检测方法技术支持工程师必备的小技能包 下面我分享下我学到和用到的企业网络故障检查和排错思路 问题
  • 9:00面试,9:06就出来了,问的问题实在有点变态。。。

    从小厂出来 没想到在另一家公司又寄了 到这家公司开始上班 加班是每天必不可少的 看在钱给的比较多的份上 就不太计较了 没想到5月一纸通知 所有人不准加班 加班费不仅没有了 薪资还要降40 这下搞的饭都吃不起了 还在有个朋友内推我去了一家互联
  • 你了解docker技术的意义及用途吗?

    要说2015年扩张得最快的技术 那一定要数Docker不可 随着 互联网 的被重视以及大数据 云服务的兴起 相关的技术更是如雨后春笋般冒起 当中 有很多性能优良的技术更是先赢一步 不仅进入IT者的视界 更被众多的企业委以重任 现在 就随大圣
  • fcgi程序两种编写风格

    fcgi进程可以写成单线程的 也可以写成多线程的 单线程就是main函数中有一个死循环 一直等待接受请求 有请求过来时 就处理请求 并返回结果 没有并发性 多线程也分两种模式 一种是main函数起多个线程 每个线程都独立接受请求 另一种是m
  • Debian10搭建Apache2

    文章目录 1 所需设备 2 任务描述 3 配置Apache2 3 测试 1 所需设备 Debian10Server IPaddress 10 1 1 1 netmask 255 255 255 0 IPaddress 10 1 1 2 ne
  • 数组--二维数组

    JAVA的二维数组 二维数组 在二维数组中的每一个元素中都是一个一维数组 意思就是两个一维数组相嵌套而成的数组 二维数组的声明 有一下两种 int a int a 在声明时 一般推荐第一种情况 方便代码阅读 二维数组在创建时也要给定数组的长
  • Android Studio :Could not find com.android.tools.build:aapt2

    Android Studio 又一次升级 从Android Studio3 2升级到Android Studio3 3 每次升级都是抱着必死的很大的决心进行升级 就怕Android Studio罢工 到时候一番乱搞 问题大概是下面这个样子的
  • 机器学习练习题(二)

    从牛客网找来得题目 解析是题目下的高赞答案 1 下面有关分类算法的准确率 召回率 F1 值的描述 错误的是 a 准确率是检索出相关文档数与检索出的文档总数的比率 衡量的是检索系统的查准率 b 召回率是指检索出的相关文档数和文档库中所有的相关
  • 若依框架快速开发项目(避坑超详细)

    若依框架快速开发项目 避坑超详细 初衷 若依框架使用及其普遍 是一个非常优秀的开源框架 框架本身的权限系统 字典设置以及相关封装 安全拦截相当完善 本人受益匪浅 学学到了许多 在这里 先向原创作者致敬 本人刚刚接触这个框架的时候 很迷茫 几
  • 前端多级搜索条件,不走后台

    handleSearch 备份数据 let arr JSON parse JSON stringify this tableData form是查询条件 通过遍历key值来循环处理 Object keys this form forEach