具有多个 ComboBox 过滤器的 VueJS 2.x 表答案

【问题标题】：VueJS 2.x Table with Multiple ComboBox Filter具有多个 ComboBox 过滤器的 VueJS 2.x 表
【发布时间】：2021-04-27 17:22:19
【问题描述】：

我使用 VueJS 2.x (JavaScript) 和 Vuex 来获取表格中的数据。我还有两个用组合框制作的过滤器。通过选择过滤器，我需要过滤以前获取的数据列表。过滤器也可以一起使用。如何恢复过滤器？

我使用简单的<table>... <tbody><tr v-for="(item, index) in list>...</tr>"</table> 和过滤器<select><option></option></select>

Tnx 寻求答案。

【问题讨论】：

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

过滤数据的最佳方法是使用computed 属性，因为这是它们的本意。

所以对于您的选择：

<select v-model="filter">
    <option value="5">5</option>
    <option value="10">10</option>
</select>

你的桌子：

<table>
   <tbody>
      <tr v-for="(item, index) in getFilteredItems> {{ item }} </tr>
   </tbody>
</table>

你的脚本：

data: {
    items : [5,10,15,20,25],
    filter : 0
  },
  computed : {
      getFilteredItems() {
          return this.items.filter(item => // apply the filter according to this.filter);
      }
  }

每次this.filter 发生变化或this.items 发生变化时，都会调用您的计算函数。您可以在vue docs computed properties中阅读更多关于计算属性的信息

当然你需要在这里应用你自己的代码，这只是一个例子。

【讨论】：

【解决方案2】：

首先使用 v-model 将您的选择绑定到一些变量并监听更改事件。例如：

<select v-model="filter" @change="applyFilter">
    <option value="5">5</option>
    <option value="10">10</option>
</select>

您将需要另一个列表来存储过滤的项目和应用过滤器的方法。

  data: {
    items : [5,10,15,20,25],
    filteredItems : [],
    filter : 0
  },
  methods : {
      applyFilter (){
          this.filteredItems = this.items.filter(item => item > this.test);
      }
  }

这是一个非常基本的实现，只有一个过滤器。但是您可以根据需要添加任意数量。使用给定的过滤器编辑过滤器方法。向所有选择元素添加相同的更改事件。（既然你说需要多个过滤器）

【讨论】：

当以不同的方式呈现数据时——比如过滤数据，最好使用计算属性，因为当this.filter在任何地方发生变化时它们会自动更新（不仅仅是选择的变化），这就是它们是专为。