如何在Vue.js中组合多个自定义过滤器函数？

嘿，我明白你现在的困扰啦——目前计算属性只生效了一个过滤器，想要同时应用多个过滤规则，还得方便后续添加更多？没问题，我给你两种实用方案，一种直接适配现有代码，另一种更适合长期扩展。

方案一：直接组合现有两个过滤器 #

你只需要修改productsFilter计算属性，让它同时校验两个过滤器的结果，只有当产品满足所有过滤条件时才会被保留。

修改后的代码如下：

computed: {
  productsFilter: function () {
    // 先判断产品数据是否加载完成，避免报错
    if (!this.products) return [];
    
    return this.products.filter(product => {
      // 同时满足产品组和包装重量的过滤条件
      return this.filterProductGroupItems(product) && this.filterProductPackageWeights(product);
    });
  }
},

这样修改后，只有既符合选中的产品组、又符合选中的包装重量的产品才会被保留下来。

方案二：可扩展的过滤器组合（推荐） #

如果你后续计划添加更多过滤器，每次修改计算属性逻辑会很繁琐。我们可以把所有过滤器函数统一放到一个数组里，通过遍历检查的方式实现多过滤条件的组合，新增过滤器时只需往数组里追加即可。

具体步骤：

1. 在data中新增一个存储过滤器的数组：

data: {
  products: null,
  productGroups: null,
  productPackageWeights: null,
  checkedProductGroupItems: [],
  checkedProductPackageWeights: [],
  // 用来存放所有过滤器函数
  filterList: []
},

2. 在created钩子中初始化这个数组，把现有过滤器加入：

created: function created() {
  this.fetchData();
  // 初始化过滤器列表
  this.filterList = [
    this.filterProductGroupItems,
    this.filterProductPackageWeights
    // 以后新增过滤器，直接在这里追加就行
  ];
},

3. 修改计算属性，用every方法确保所有过滤器都通过：

computed: {
  productsFilter: function () {
    if (!this.products) return [];
    
    return this.products.filter(product => {
      // 遍历所有过滤器，只有全部返回true才保留该产品
      return this.filterList.every(filter => filter(product));
    });
  }
},

以后新增过滤器时，你只需要：

• 定义新的过滤方法（比如filterProductPrice）
• 把这个方法追加到filterList数组中，完全不用修改计算属性的核心逻辑！

小提示 #

你的过滤方法已经处理了「未选中任何选项则不过滤」的逻辑，所以组合后完全兼容这种场景——只要某个过滤器的选中项为空，它就会返回true，相当于只应用其他有选中项的过滤器。

内容的提问来源于stack exchange，提问作者Thijs