纯前端做查询

    <el-table
      ref="singleTable"
      border
      :data="filteredData"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
    >
      <el-table-column property="status" label="状态" sortable>
      </el-table-column>
      <!-- <el-table-column property="purchaseOrderNo" label="采购单编号">
      </el-table-column> -->
      <el-table-column property="materialType" label="材料类型" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.materialBase?.materialType || "" }}</span>
        </template>
      </el-table-column>
    </el-table>
    

通过计算属性去监听，这是全查，模糊查通过includes,createdTypetableData是后台返回的数据，filterOptions为自己查询输入的条件

      computed: {
filteredData() {
  let tableDataDetail = this.createdTypetableData;
  if (this.filterOptions.status) {
    tableDataDetail = tableDataDetail.filter((item) => {
      return item.status == this.filterOptions.status;
    });
  }
  if (this.filterOptions.materialType) {
    tableDataDetail = tableDataDetail.filter((item) => {
      return (
        item.baseDeviceInfo.materialType == this.filterOptions.materialType
      );
    });
  }

  },