vue.js - 按 2 个或更多字段过滤 BootstrapVue 表
问题描述
我正在使用 Bootstrap-Vue 在表格中显示信息。显示的每个元素都有两个字段(名称和年龄)。到目前为止,我可以按一个字段(姓名或年龄)过滤,但我希望有两个输入来过滤它们。
因此,如果我在 name 处键入“Dav”,在 age 处键入“2”,我想在他/她的年龄上显示所有名称为 'Dav' 和 '2' 的人。
我尝试将一个数组(['age','name'])和一个对象(name:'name',age:'age')传递给:filter,但没有任何效果。
我已经分叉了一个例子并简化了它。在这里,您将有两个输入,一个用于姓名,另一个用于年龄。您可以按名称过滤(:filter="name"),但不能按年龄过滤。我可以为“姓名”切换“年龄”,它会起作用,但仅限于“年龄”。
这是代码:
[https://jsfiddle.net/esom2f9p/2/][1]
TL;DR:表格按“姓名”过滤,但应按“姓名”和“年龄”过滤。我想知道如何按两个或多个字段进行过滤。
解决方案
我使用了计算字段和 filter-function 道具
<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];
}
}
},
来自引导 vue 文档
过滤器函数将传递两个参数:
原始项目行记录数据对象。将此参数视为只读。过滤器属性的内容(可以是字符串、正则表达式、数组或对象)
推荐阅读
- c# - 加载不同的 COM 库版本
- reactjs - 代码笔中的 React 16
- c# - 代码从捕获中掉出来?
- angular - Angular 将表单组转换为具有较少参数的对象
- python - 无法导入 SimPy
- c# - 读取 ActionFilter 中的响应,然后读取 DelegatingHandlers
- android - SQLiteConstraintException:NOT NULL 约束失败,即使在声明了默认值之后
- javascript - 当使用客户端函数填充 DOM 时,如何等待所有图像从 puppeteer 中的 page.evaluate 函数加载
- android - 应用程序进入后台时如何处理
- python - 将代码从matlab转换为python,出现问题