Vue中如何通过多个下拉选择器实现数据集多条件过滤？

你现有的单条件筛选逻辑可以平滑扩展为多条件联合过滤，核心逻辑是在数组过滤的回调中，对所有已选中的筛选条件逐一做匹配校验，未选中的条件自动跳过，不需要嵌套多层分支判断。

实现步骤 #

• 为剩余的筛选维度绑定对应的响应式变量，和现有selectedStore逻辑保持一致：比如分类下拉绑定selectedCategory、商品下拉绑定selectedProduct，所有选中值变量初始值设为null
• 在filteredDeals计算属性的filter回调中，逐条校验数据：仅当某个筛选条件有选中值时，才判断当前数据对应字段是否和选中值匹配；无选中值时直接跳过该条件校验
• 所有生效筛选条件全部匹配的数据，才会被保留到最终返回的列表中

基础实现代码 #

直接替换你原有的filteredDeals计算属性即可，后续新增筛选项只需要按照相同格式追加判断逻辑：

computed: {
  filteredDeals() {
    return this.deals.filter((item) => {
      // 门店筛选
      if (this.selectedStore && item.store.id !== this.selectedStore.id) {
        return false
      }
      // 分类筛选
      if (this.selectedCategory && item.category.id !== this.selectedCategory.id) {
        return false
      }
      // 商品筛选
      if (this.selectedProduct && item.product.id !== this.selectedProduct.id) {
        return false
      }
      return true
    })
  }
}

多筛选项场景优化写法 #

如果后续筛选维度超过3个，可以把筛选规则统一抽成配置，通过循环校验减少重复代码，新增筛选项只需要改配置数组即可：

computed: {
  filteredDeals() {
    // 筛选规则配置：数据字段路径、对应选中值
    const filterRules = [
      { fieldPath: 'store.id', selectedValue: this.selectedStore?.id },
      { fieldPath: 'category.id', selectedValue: this.selectedCategory?.id },
      { fieldPath: 'product.id', selectedValue: this.selectedProduct?.id }
    ]

    return this.deals.filter(item => {
      return filterRules.every(rule => {
        // 无选中值时跳过当前规则校验
        if (!rule.selectedValue) return true
        // 按字段路径取当前数据的对应值
        const currentValue = rule.fieldPath.split('.').reduce((target, key) => target?.[key], item)
        return currentValue === rule.selectedValue
      })
    })
  }
}

扩展提示：如果后续筛选支持多选（比如同时选中多个门店），只需要把等值判断替换为Array.includes判断即可，整体过滤结构不需要改动。

该实现完全兼容你现有的v-for="item in filteredDeals"渲染逻辑，所有下拉选中值变化时，计算属性会自动重新计算，列表实时更新。

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