Question

场景 从下拉列表中选择一个表格列，然后选择0之类的条件，然后在搜索框中输入值。

< | > | = | >= | <=：

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">

Js：

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

我如何搜索表格？试过但似乎没有任何工作。

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

缺失：键入检查，键入转换，其他操作员，输入卫生。

Vue，Js：条件搜索过滤器

1 个答案: