vue-实现各种模糊搜索（单个项，多个项，全项）

1:利用计算属性来接管数据对数据进行过滤操作
2:过滤操作等内容主要是匹配搜索内容和接管的数据指定的key属性的值
3:用到Object.keys 能够获取所有要匹配过滤等的键
4:注意搜索等值最好统一转成大写或小写（如果是字符串）
5:主要用到filter和some函数，其中some函数如果是单项就不需要直接过滤返回匹配结果就行

代码：
    computed:{
  tables(){
          const search = this.search//搜索词
          if(search){
              //过滤
              return this.data.filter(data=>{
                  // console.log(Object.keys(data))//打印出所有等data内等key
                  //1:所有项目模糊搜索 对所有key进行搜索
                  // return Object.keys(data).some(key=>{
                     //  console.log(data[key])
                     //  console.log(key)
                     //   return String(data[key]).toLowerCase().indexOf(search) > -1
                  // })
                  //2:指定项目模糊搜索 指定对数组内两个项目等key的列进行搜索
                 // let zhiding = ["zl_no", "date"]//可以指定这一列
                  // return zhiding.some(key=>{
                  //     return String(data[key]).toLowerCase().indexOf(search) > -1
                  // })
                  //3：单个项过滤搜索 -可以指定具体单个-就不用再用some   直接指定colom为zl_no 的项目进行搜索
                  return String(data["zl_no"]).toLowerCase().indexOf(search) > -1
              })
          }
          return this.data
      },
}

项目中注意点：
个人项目中数据是根据时间选择完点击发送后获取，所有搜索后如果搜索不到，再点发送数据还是会过滤，页面数据是计算属性接管等原因，select值没改变
因此解决方案：如果搜索不到再次点击确认搜索发送后端等数据保证能重新加载到页面（当输入再次清空tables还被限制着或者监听模糊搜索等搜索框清空后改变过滤条件等search值）
fnAjaxDate(){//1- 获取事件确认按钮
      this.search =""//如果搜索不到再次点击确认搜索发送后端等数据保证能重新加载到页面（当输入再次清空tables还被限制着或者监听模糊搜索等搜索框清空后改变过滤条件等search值）
      if(!this.datapicker||this.datapicker.length==0) return
      this.datapicker[0] = this.datapicker[0].replace(/-/g,"")
      this.datapicker[1] = this.datapicker[1].replace(/-/g,"")
      this.fnAjaxUpdata()//调取后端数据接口
    },
另外 显示数据条数等记录也别忘了改为计算属性this.datas改为this.tables

<p v-if="this.tables.length>0" style="font-size: 16px;margin-bottom:10px;">
            用户名：{{user}}
            共查询到：<span style="color: #1890ff;;font-size: 24px;font-weight: 700;"> {{this.tables.length ?this.tables.length :0}}  </span>条多工制令单
        </p>