gpt4 book ai didi

vue.js - 按 2 个或更多字段过滤 BootstrapVue 表

转载 作者:行者123 更新时间:2023-12-05 03:01:25 28 4
gpt4 key购买 nike

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

因此,如果我在姓名处键入“Dav”并在年龄处键入“2”,我想显示所有姓名为“Dav”且年龄为“2”的人。

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

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

代码如下:

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

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

最佳答案

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

<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 prop 的内容(可以是字符串、RegExp、数组或对象)

关于vue.js - 按 2 个或更多字段过滤 BootstrapVue 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55745897/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com