Vue.js表格多变量过滤优化：新增分支过滤逻辑需求

核心思路 #

将每个过滤条件拆分为独立判断逻辑，仅当条件被选中（存在有效值）时才应用过滤规则；未选中的条件直接跳过，以此支持单独选客户、单独选分支、结合日期等任意组合的过滤场景。

修改后的计算属性代码 #

computed: {
  filteredItems() {
    return this.items.filter(item => {
      // 客户名称过滤：选中客户时才匹配名称，未选中则直接通过
      const matchesCustomer = !this.selectedCustomer || item.customerName === this.selectedCustomer;
      // 分支过滤：选中分支时才匹配分支，未选中则直接通过
      const matchesBranch = !this.selectedBranch || item.branch === this.selectedBranch;
      // 日期过滤：选中日期范围时才匹配，未选中则直接通过
      const matchesDate = !this.dateRange || (item.date >= this.dateRange.start && item.date <= this.dateRange.end);
      
      // 所有启用的过滤条件需同时满足
      return matchesCustomer && matchesBranch && matchesDate;
    });
  }
}

关键说明 #

• 每个条件都加入空值判断：比如!this.selectedBranch时，该条件直接返回true，相当于不启用分支过滤
• 用&&连接所有条件，确保只有同时满足所有已启用的过滤规则，该行数据才会被保留
• 这种写法可快速扩展其他过滤条件，比如新增状态过滤，只需添加一行类似的判断逻辑即可

场景验证示例 #

• 单独选分支：仅selectedBranch有值，其余条件为空 → 仅展示对应分支的行数据
• 客户+日期组合：selectedCustomer和dateRange有值，分支未选中 → 展示匹配客户且在日期范围内的数据
• 三条件全选：同时满足客户、分支、日期三个过滤规则的数据才会被保留

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