在输入字段中使用带 OR 条件的逗号分隔字符串过滤 BootstrapVue table

Question

我有一个 BootstrapVue table 看起来像这样；

table 的代码（归功于此）在这里；

new Vue({
  el: '#app',
  data() {
    return {
      filter: '',
      items: [
        { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
        { id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
        { id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
        { id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
        { id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 },
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="app" class="p-5">
  <b-input v-model="filter" placeholder="Filter table.."></b-input>
  <hr />
  <b-table :items="items" :fields="fields" :filter="filter">
  </b-table>
</div>

基于上述代码，table 行将根据输入字段中的字符串进行过滤。不幸的是，这不是我想要的。我想要的是输入字段能够接受逗号分隔的字符串，并且子字符串可用于在 OR 条件下过滤 table 行。例如，如果字符串是54, Hvidt，那么第一行和第二行将被过滤。

我正在使用 BootstrapVue，vue.js2.6

Answer 1

BootstrapVue 允许使用 custom filter function.

编写您自己的过滤逻辑

为了使其正常工作，您需要：

一个:filter指定
filter 值是真实的。如果为假，则绕过过滤功能（不发生过滤）。
a :filter-function 指定，采用两个参数：row 和当前 filter 值（可选且不需要：您可以从 this.filter 读取它）。

这是一个示例，将当前 filter 值按 ,（逗号）拆分，规范化片段（trim & toLowerCase），并返回是否有在行的规范化值内找到片段。

new Vue({
  el: '#app',
  data() {
    return {
      filter: '54, Hvidt',
      items: [
        { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
        { id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
        { id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
        { id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
        { id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 }
      ]
    }
  },
  methods: {
    normalizeString(s) {
      return `${s}`.trim().toLowerCase();
    },
    filterFn(row) {
      return this.filter.split(',')
        .map(this.normalizeString)
        .some(
          term => Object.values(row)
            .map(this.normalizeString)
            .some(
              val => val.indexOf(term) > -1
            )
        );
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="app" class="p-5">
  <b-input v-model="filter" placeholder="Filter table..."></b-input>
  <hr />
  <b-table :items="items" :filter="filter" :filter-function="filterFn">
  </b-table>
</div>

重要说明：这里提供的过滤函数是示范性的，没有考虑BootstrapVue的built-infilter-ignored-fields 和 filter-included-fields。它也没有考虑 filterByFormatted field definition.

如果您需要这些功能中的任何一个，您需要自己进行改进。

我想不用指出过滤器功能可以访问整个组件并且可以以任何方式修改。如果函数 returns 为真值，则显示 row，如果 returns 为假值，则不显示。

在输入字段中使用带 OR 条件的逗号分隔字符串过滤 BootstrapVue table

Filter BootstrapVue table using comma separated string with OR condition in input field

javascript

vue.js

bootstrap-vue