vue如何多条件筛选数组对象

Question

经常出现的一个情况，就是一些表格数据，后端会给全部的数据过来，然后前端要根据上面搜索条件，很多个来筛选出对应的数据。
要求就是，没有选中的就是不筛选。选中了几个就是对应筛选这几个条件符合的数据出来。
一般都是数组对象的形式。请问这种有什么好用的方法可以做

Answer 1

以下回答来自GPT，请参考：
在 Vue 中，你可以使用计算属性（computed）来实现对表格数据的筛选操作。通过监听搜索条件的变化，计算属性可以动态地返回符合条件的数据。

以下是一个简单的示例代码，假设有一个表格数据数组 tableData 和多个搜索条件 searchOptions，每个搜索条件都有一个名称和一个布尔值表示是否选中：

// 数据
data() {
  return {
    tableData: [
      { name: 'Alice', age: 25 },
      { name: 'Bob', age: 30 },
      { name: 'Charlie', age: 28 }
      // 其他数据项...
    ],
    searchOptions: [
      { name: '选项1', selected: false },
      { name: '选项2', selected: true },
      { name: '选项3', selected: true }
      // 其他选项...
    ]
  };
},

// 计算属性
computed: {
  filteredData() {
    return this.tableData.filter(item => {
      // 遍历每个搜索选项，并只保留选中的项
      return this.searchOptions.every(option => !option.selected || item[option.name]);
    });
  }
}

在这个示例中，filteredData 计算属性会根据搜索选项动态地返回筛选后的数据。在过滤函数中使用了 Array.prototype.filter() 方法，结合 Array.prototype.every() 方法来判断是否符合所有选中的条件。

最后，在模板中绑定 filteredData 属性即可将筛选后的数据展示在页面上。

<table>
  <tr v-for="item in filteredData" :key="item.name">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
  </tr>
</table>

通过这种方式，你可以根据搜索条件动态地筛选出符合条件的表格数据。当搜索条件发生变化时，计算属性就会重新计算，从而实现数据的动态更新。