按 2 个或更多字段过滤 BootstrapVue table

Question

我正在使用 Bootstrap-Vue 在 table 中显示信息。显示的每个元素都有两个字段（名称和年龄）。到目前为止，我可以按一个字段（姓名或年龄）进行过滤，但我希望有两个输入可以同时按它们进行过滤。

因此，如果我在姓名处键入 "Dav"，在年龄处键入“2”，我想显示所有姓名为 'Dav'、年龄为“2”、年龄为 his/her 的人。

我试过将一个数组 (['age', 'name']) 和一个对象 (name: 'name', age:'age') 传递给 :filter , 但没有任何效果。

我分叉了一个例子并简化了它。在这里您将有两个输入，一个用于姓名，另一个用于年龄。您可以按名称过滤 (:filter="name") 但不能按年龄过滤。我可以将 'age' 切换为 'name'，它会起作用，但仅适用于 'age'。

代码如下：

[https://jsfiddle.net/esom2f9p/2/][1]

TL;DR：table 按 'name' 过滤，但应按 'name' 和 'age' 过滤。我想知道如何按两个或多个字段进行筛选。

Answer 1

您可以使用 computed 属性来过滤数据。

参考这个 -

https://jsfiddle.net/thbn816x/5/

Answer 2

我使用了计算字段和过滤函数属性

<b-table bordered show-empty striped stacked="md" no-provider-filtering 
class="management-list" ref="table"
v-model="filteredItems"
:items="tableItems"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
:filter-function="filterTable"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
@filtered="onFiltered">
</b-table>

当所有变量都为空时，将过滤器设置为空。如果至少有一个不为空，则将其设置为一个数组。在我的示例中，我只使用了 2 个变量。

computed: {
    filter: function() {
        if (this.filterVarOne === null && this.filterVarTwo ===  null){
            return null;
        }

        return [this.filterVarOne , this.filterVarTwo];
    }
},

然后当设置其中一个变量时将调用过滤函数。

methods: {
    filterTable: function(tableRow, filter){
        if (filter[0] !== null && filter[1] !== null){
            //both filters set
            return tableRow.columnOne == filter[0] && 
                   tableRow.columnTwo == filter[1];
         }
        else {
            return tableRow.columnOne == filter[0] ||
                tableRow.columnTwo == filter[1];
        }

    }
},

来自 bootstrap vue 文档

过滤器函数将传递两个参数：

原始项目行记录数据对象。将此参数视为只读。 filter 属性的内容（可以是字符串、正则表达式、数组或对象）

按 2 个或更多字段过滤 BootstrapVue table

Filtering BootstrapVue table by 2 or more fields

vue.js

bootstrap-vue