如何使多个搜索过滤器与 Vue Bootstrap 中的 for 循环一起使用？

Question

我有一个 table，每列都有一些过滤器，但是当我输入任何内容时，所有项目都会消失。控制台没有return任何错误。

代码如下：

<template>
  <div>
    <b-table
      id="the-table"
      :per-page="perPage"
      :current-page="currentPage"
      :items="filteredItems"
      :fields="fields"
    >
      <template slot="top-row" slot-scope="{ fields }">
        <td v-for="field in fields" :key="field.key">
          <input v-model="filters[field.key]" :placeholder="field.label" />
        </td>
      </template>
    </b-table>
    <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="the-table"></b-pagination>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      filters: {
        option: "",
        style: "",
        stock: "",
      },
      items: [],
      fields: [
        { key: "options", label: "Options", sortable: true },
        { key: "style", label: "Style", sortable: true },
        { key: "stock", label: "Stock", sortable: true },
        { key: "type", label: "Type", sortable: true },
        { key: "class", label: "Class.", sortable: true },
      ],
      perPage: 15,
      currentPage: 1,
    };
  },
  created() {
    this.getTable();
  },
  methods: {
    getTable() {
      axios
        .get("./data/options.json")
        .then((res) => (this.items = res.data))
        .catch((error) => console.log(error));
    },
  },
  computed: {
    rows() {
      return this.items.length;
    },
    filteredItems() {
      return this.items.filter((d) => {
        return Object.keys(this.filters).every((f) => {
          return this.filters[f].length < 1 || this.filters[f].includes(d[f]);
        });
      });
    },
  },
};
</script>

我正在尝试像这样过滤一组对象：

[{"option": "ABEVH160", "style": "American", "stock": "ABEV3", "type": "CALL", "class": "ITM"},
{"option": "BBAS230", "style": "European", "stock": "BBAS3", "type": "PUT", "class": "ATM"},
{"option": "BBDC180", "style": "American", "stock": "BBDC4", "type": "CALL", "class": "OTM"}]

我的目标是能够单独过滤每一列：

有人知道我错过了什么吗？

Answer 1

您想要的似乎是 DataTable Filter | Filter Row in PrimeVue. I tried to find something similar in the documentation of bootstrap-vue (documentation)，但找不到类似的东西。

也许您正处于仍然可以在项目中实施 PrimeVue 的阶段。我自己使用 PrimeVue 中的 Filter Row，可以推荐它。

Answer 2

问题出在条件上：

return this.filters[f].length < 1 || this.filters[f].includes(d[f]);

d[f] 是完整值，this.filters[f] 是搜索字符串。显然这是行不通的，因为它会检查子字符串中是否包含完整的单词。只需反转条件：

return this.filters[f].length < 1 || d[f].includes(this.filters[f]);

您可以看到它正在运行 here。

如何使多个搜索过滤器与 Vue Bootstrap 中的 for 循环一起使用？

How to make multiple search filters work with a for loop in Vue Bootstrap?

vue.js

bootstrap-vue