VUE 之普通表格过滤器封装（前端实现表格实时搜索），无分页情况下

需求：无分页表格不请求接口进行过滤筛选
封装过滤方法：

// 过滤器
/***
*@param {*} searchParam：[]需要筛选的参数,data中定义，根据项目需求进行处理
*@param {*} tableData：[]存放接口初始化数据包,data中定义，根据项目需求进行处理
**/
    handleFilter(searchParam, tableData) {
      for (var x in searchParam) {
        if (searchParam[x] === null) {
          searchParam[x] = ''
        }
      }
      const searchSelectParams = searchParam
      let arr = JSON.parse(JSON.stringify(tableData))
      Object.keys(searchSelectParams || {}).forEach((key) => {
        arr = arr.filter((el) =>
          (el[key] + '').includes(searchSelectParams[key].trim())
        )
      })
      return arr
    }

使用：
在computed中定义，计算属性中实时更新过滤后的数据

computed: {
    showTableDatas() { // showTableDatas：[],表格中data属性对应的值（computed中定义）
      return this.handleFilter(this.searchParam, this.tableData)
    }
  },

看一下前端效果：

可以看到空格不参与筛选。