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)); 

缺少：類型檢查，類型轉換，其他運算符，輸入衛生條件。