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

时间:2019-04-18 12:18:25

标签: vue.js bootstrap-vue

我正在使用Bootstrap-Vue在表中显示信息。显示的每个元素都有两个字段(name和age)。现在,我可以按一个字段(名称或年龄)进行过滤,但是我想有两个输入要按它们两个进行过滤。

因此,如果我在姓名上键入“ Dav”,在年龄上键入“ 2”,则我要显示所有年龄在其姓名ang为“ 2”的人中带有“ Dav”的人。

我尝试将数组(['age','name'])和一个对象(名称:'name',age:'age')传递给:filter,但无济于事。

我提供了一个示例并对其进行了简化。在这里,您将有两个输入,一个输入名称,另一个输入年龄。您可以按名称(:filter =“ name”)进行过滤,但不能按年龄进行过滤。我可以将“年龄”切换为“名称”,它将起作用,但仅适用于“年龄”。

代码如下:

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

TL; DR:该表按“名称”过滤,但应按“名称”和“年龄”过滤。我想知道如何按两个或多个字段进行过滤。

2 个答案:

答案 0 :(得分:1)

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

请参阅-

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

答案 1 :(得分:0)

我使用了计算字段和过滤功能道具

<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>

当所有变量均为null时,将filter设置为null。如果至少一个不为null,则将其设置为数组。在我的示例中,我仅使用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文档

过滤器函数将被传递两个参数:

原始项目行记录数据对象。将此参数视为只读。 过滤器属性的内容(可以是字符串,RegExp,数组或对象)