Question

我有表格我有一个搜索过滤器，搜索包含三个Select column name (e.g "name")，选择条件operator e.g(> or <)，第三个search input e.g(20)。

例如，它将来age > 20。

以下代码无效：

search_column是选择列，
search_operator是条件例如（＆gt;或＆lt;），
search_input是例如20，总年龄＆gt; 20

computed: {
  filteredRow: function() {
    return this.model.data.filter(row => {
      let value = row[this.query.search_column];
      for(var key in row){
        if(String(row[key]).indexOf(this.query.search_input) !== -1){
          switch (this.query.search_operator) {
            case "=": return value == this.query.search_input;
            case ">": return value > this.query.search_input;
          }
        }
      }
    });
  }
}

上面的代码无效，因为我必须在if()中返回true才能首先填充表格。并且对于返回true，仅适用于从搜索输入进行简单搜索。

怎么做？

Answer 1

我认为你的代码工作得很好，除非你把它弄得太复杂了

我们假设您有一个表格数据this.model.data：

[{
  name: 'Alpha', 
  age: 21
}, {
  name: 'Beta',
  age: 18
}, {
  name: 'Gamma',
  age: 27
}]

当它带来条件时：

search_column为age

search_operator是条件>

search_input为20

以下代码应返回已过滤的Alpha和Gamma

computed: {
  filteredRow: function() {
    return this.model.data.filter(row => {
      // filter each row and assert the column `value` 
      let value = row[this.query.search_column] 
      switch (this.query.search_operator) {
        case "=": return value === this.query.search_input;
        case ">": return value > this.query.search_input;
        default: return false; // better to have a default handler
      }
    });
  }
}

filteredRow将是：

[{
  name: 'Alpha',
  age: 21
}, {
  name: 'Gamma',
  age: 27
}]

Vue：按列名

1 个答案: