Vue 3 多条件筛选必须用 computed 实现响应式过滤，通过 !value || 条件结构处理空值，确保数字转字符串、文本统一小写、状态用 'all' 控制，且始终基于扁平原始数组筛选后再分组。

Vue 3 实现多条件联合筛选，核心是用响应式数据驱动计算属性，让过滤逻辑自动更新、可维护、不干扰原始数据。

关键不在“写多少 if”，而在“怎么组织条件”

---

多条件筛选必须用 computed，不能靠 methods 或 watch

computed 是响应式过滤的唯一推荐方式：它缓存结果、只在依赖变化时重算、天然适配 Vue 的响应系统。
methods 每次渲染都执行，watch 只能触发副作用，都不适合生成过滤后列表。

示例结构：

const searchId = ref('')
const searchStatus = ref('all') // 'all' | 'active' | 'inactive'
const searchKeyword = ref('')

const filteredList = computed(() => {
  return originalList.value.filter(item => {
    const idMatch = !searchId.value || item.id.toString().includes(searchId.value)
    const statusMatch = searchStatus.value === 'all' || item.status === searchStatus.value
    const keywordMatch = !searchKeyword.value || 
      item.title.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      item.desc?.toLowerCase().includes(searchKeyword.value.toLowerCase())

    return idMatch && statusMatch && keywordMatch
  })
})

---

条件之间用 && 连接，每个条件独立判断是否启用

不要写 item.id.includes(searchId.value) 直接运行——当输入为空时会报错或误匹配。
正确做法是：“空值跳过该条件”，用 !xxx.value || ... 结构。

常见组合模式：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 数字字段（ID、金额）：转字符串再 includes()，避免类型错误
• 文本字段（标题、描述）：统一 .toLowerCase() 提升大小写容错
• 下拉状态字段：用 'all' 表示不限，其他值严格全等匹配
• 时间/日期范围：单独抽成两个 ref（startDate / endDate），过滤时用 >= 和

---

分组表格要先扁平再筛选，别在分组后 filter

如果数据已按“部门”“地区”等维度分组为 Map 或对象，筛选必须作用于原始扁平数组。
否则会出现：华东组筛完剩 2 条，华北组筛完剩 0 条，但用户想看“所有金额 > 500 的记录”，结果被分组逻辑卡死。

正确流程：

1. 原始数据 → originalList: Ref
2. 所有筛选条件 → 各个 ref 或 reactive 对象
3. filteredItems = computed(() => originalList.value.filter(...))
4. 如需分组显示，再对 filteredItems 做 groupBy（例如用 Object.groupBy 或 reduce）

---

输入清空时自动还原，无需手动重置

只要所有搜索 ref 初始化为空（ref('') 或 ref('all')），computed 就自然返回全量数据。
不需要监听清空事件、也不需要额外 resetFilters() 方法——这是响应式设计的优势。

比如：

// 用户删光 input 内容 → searchKeyword.value 变成 '' → computed 中 !searchKeyword.value 为 true → 该条件恒成立
// 整个过滤逻辑无缝退化为“无关键词限制”

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！