前端实现多条件模糊查询，空条件跳过

<template>
  <div id="basic-table-con">
    <div class="g-box">
      <div class="toolbar">
        <div class="g-search-simple pull-left">
          <span style="margin: 0 10px">用户名</span>
          <el-input
            placeholder="请输入内容"
            v-model="searchUserName"
            class="g-input-width"
          ></el-input>
        </div>
        <div class="g-search-simple pull-left">
          <span style="margin: 0 10px">语句</span>
          <el-input
            placeholder="请输入内容"
            v-model="searchSentence"
            class="g-input-width"
          ></el-input>
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="handleSearch"
          >
            查询
          </el-button>
          <el-button @click="clear">清空</el-button>
        </div>
      </div>
      <el-table
        :data="
          filterTableData.slice(
            (currentPage - 1) * pageSize,
            currentPage * pageSize
          )
        "
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
        ref="filterTable"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          label="用户ID"
          prop="USER_ID"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          label="用户名"
          prop="USER_NAME"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          label="语句"
          prop="SENTENCE"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <el-pagination
      class="pull-right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 25]"
      background
      :page-size="pageSize"
      :pager-count="5"
      layout="total, sizes, prev, pager, next, jumper"
      :hide-on-single-page="false"
      :total="total"
    ></el-pagination>
    <div class="clearfix"></div>
  </div>
</template>

<script>


  export default {
    data() {
      return {
        // 【表格】
        tableData: [],
        filterTableData: [],
        currentPage: 1,
        pageSize: 25,
        total: 100,
        multipleSelection: [],
        // 查询
        searchUserName: null,
        searchSentence: null,
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
         // 获取数据方法
      },
      handleSizeChange(val) {
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        this.currentPage = val;
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      filter(value, row) {
        return row.STATE === value;
      },
      //多条件查询方法
      productFilter(data, params) {
        let notNullParams = this.paramsIsNull(params);
        return data.filter((item) => {
          return Object.keys(notNullParams).every((key) => {
            return (
              item[key] != undefined &&
              item[key].indexOf(notNullParams[key]) !== -1
            );
            //item[key] == notNullParams[key]; // 模糊搜索
          });
        });
      },
      //删除空属性
      paramsIsNull(obj) {
        let _newPar = {};
        for (let key in obj) {
          // 如果对象属性的值不为空，就保存该属性（如果属性的值为0，保存该属性。如果属性的值全部是空格，属于为空。）
          if (
            (obj[key] === 0 || obj[key]) &&
            obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
          ) {
            // 保存属性
            _newPar[key] = obj[key];
          }
        }
        // 返回新对象
        return _newPar;
      },

      handleSearch() {
        let params = {
          USER_NAME: this.searchUserName,
          SENTENCE: this.searchSentence,
        };
        this.filterTableData = this.productFilter(this.tableData, params);
      },
      clear() {
        this.searchUserName = null;
        this.searchSentence = null;
        this.init();
      },
    },
  };
</script>

<style lang="scss" scoped></style>