Vue,Js：条件搜索过滤器

Question

场景： 从下拉列表中选择一个表格列，然后选择< | > | = | >= | <=等条件，然后在搜索框中输入值。

column, condition, search input:

// Select column name
<select class="dv-header-select" v-model="query.search_column">
    <option v-for="column in columns" :value="column">{{column}}</option>
</select>

// Select condition(<,>,<=,>=) 
<select class="dv-header-select" v-model="query.search_operator">
    <option v-for="(value, key) in operators" :value="key">{{value}}</option>
</select>

// Search value
<input type="text" class="dv-header-input" placeholder="Search"
    v-model="query.search_input">

表格行：

<tr v-for="row in filteredRow">
    <td v-for="(value, key) in row">{{value}}</td>
</tr>

Js：

export default {



    data() {
        return {
        model: { data: [] },
        columns: {},
        query: {
            search_column: 'id',
            search_operator: 'equal',
            search_input: ''
        }
    },


    computed: {
      filteredRow: function(){

        // Values of column, condition, search string (E.g age > 20)
        console.log(this.query.search_column);
        console.log(this.query.search_operator);
        console.log(this.query.search_input);

        return this.model.data.filter((row) => {
        for(var key in row){
            if(String(row[key]).indexOf(this.query.search_input) !== -1){
              return true;
            }
          }
        });
      }
    }
  }

如何搜索表格？试过了，但似乎没有任何效果。

Answer 1

大致上是这样的：

var test = {
  computed: {
    filteredRow: function() {
      return this.model.data.filter(row => {
        var 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;
          // ...
        }
      });
    }
  }
};

var vm = {
  model: {data: [{a: 1}, {a: 2}] },
  query: {search_column: "a", search_operator: ">", search_input: 1 }
};

console.log(test.computed.filteredRow.call(vm));

缺少：类型检查、类型转换、其他运算符、输入卫生。