Vue js - 过滤具有多列的表

时间:2017-08-19 19:40:00

标签: javascript vuejs2

我是一个非常初学者,所以我可能对你们很明显但是......我在Vue js 2.0中制作了一个过滤器,可以在任何列中进行过滤。我想出了这个

    computed: {
    filteredAndSortedData() {
        let result = this.testData;
        if (this.filterValue) {
            result = result.filter(item =>                
item.round.includes(this.filterValue) ||
item.cat.includes(this.filterValue) ||
item.player1.includes(this.filterValue) ||                                                                  
item.player2.includes(this.filterValue));
        }

这里是jsfiddle的例子:https://jsfiddle.net/ebxsvac0/我试图做的事情。

我的问题是如何在不对列变量进行硬编码的情况下重写此代码。 谢谢

1 个答案:

答案 0 :(得分:2)

您可以改用以下内容:

if (this.filterValue) {
    result = result.filter(item => Object.keys(item).map((key) => item[key].includes(this.filterValue)).includes(true));
}

对于每个项目 - 遍历所有键(它们是列名称),并检查每个项目是否包含您要在该列中过滤的值。

以下是对jsfiddle的更新:
https://jsfiddle.net/ebxsvac0/1/