一、需求

为了项目演示demo 或者 就是小数据量 需要前端自行实现多条件查询功能，同时支持多个条件共同查询，例如下图：

二、解决方案

多说无益直接上才艺

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

三、思路解析

我们先思考一个查询的本质
例如：有 a,b,c,三个查询条件，表格数据为data共10条数据，假设当a有值时，我们可过滤出5条数据dataA，当b有值时，可过滤出3条dataB，dataA和dataB的重叠数据为2条，即同时符合a，b两个条件的部分，那么其实当用a过滤完后，b应该针对dataA来做过滤，这样就可以得到他们重叠的部分
上面代码的思路也是这样的，其实a，b，c三个过滤条件是无所谓先后顺序的，因为重叠的部分是不变的无论你先筛选谁

四、结束语

没啥好说的，功能的是实现重要的是思路，有思路代码都不成问题
点赞！关注！感谢！