前端多条件过滤

需求：el-table 做了自定义表头，表头每列都带有input输入框，输入单个值或者多个值过滤当前页面数据。

模板调用搜索&清除

 <el-input
    :placeholder="$t('QueryKey.Input3')"
    v-model="innerTableFilter.userAttr3"
    size="mini"
    clearable
    @clear="clearValue('userAttr3')"
    @input="searchValue"
    v-if="cols.label == 'UserAttr 3'"
></el-input>

过滤函数：

filterFun(filterParams, dataArray) {// 过滤条件，过滤数据
  let result = false;
  const filterArr = dataArray.filter((item) => {
    return Object.keys(filterParams).every((key) => {
      result = String(item[key])
        .toLowerCase()
        .includes(filterParams[key].trim().toLowerCase());
      return result;
    });
  });
  return filterArr;
},

搜索函数

 searchValue() {
      let filterArr = this.filterFun(this.innerTableFilter, this.inventoryCopy);
      this.$set(this, "inventory", filterArr);
      if (
        this.innerTableFilter.partStatus == "" &&
        this.innerTableFilter.partNo == "" &&
        this.innerTableFilter.partDesc == "" &&
        this.innerTableFilter.location == "" &&
        this.innerTableFilter.boxId == "" &&
        this.innerTableFilter.boxDimension == "" &&
        this.innerTableFilter.boxGW == "" &&
        this.innerTableFilter.lotNo == "" &&
        this.innerTableFilter.vendorCode == "" &&
        this.innerTableFilter.expiryDate == "" &&
        this.innerTableFilter.siOrderNo == "" &&
        this.innerTableFilter.purchaseOrderNo == "" &&
        this.innerTableFilter.coo == "" &&
        this.innerTableFilter.dateCode == "" &&
        this.innerTableFilter.invoiceNo == "" &&
        this.innerTableFilter.totalAvailQty == "" &&
        this.innerTableFilter.totalQty == "" &&
        this.innerTableFilter.allocatedQty == "" &&
        this.innerTableFilter.qtyUnit == "" &&
        this.innerTableFilter.customerCodeName == "" &&
        this.innerTableFilter.customerCode == "" &&
        this.innerTableFilter.userAttr1 == "" &&
        this.innerTableFilter.userAttr2 == "" &&
        this.innerTableFilter.userAttr3 == ""
      ) {
        this.$set(this, "inventory", this.inventoryCopy);
      }
      if (this.inventory.length == 0) {
        this.boardObj = {
          type: "queryNoResult",
          textList: [`${this.$t("InboundList.QueryNoResult")}`],
          button: [],
        };
      }
    },

清除函数

clearValue(val) {
  // 点击对应字段叉号清除字段值查询
  for (var i in this.innerTableFilter) {
    if (val === i) this.innerTableFilter[val] = "";
  }
  this.searchValue();
},