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>