Vue3多维度筛选核心是数据驱动：通过可扩展条件Schema（field/operator/value/type）解耦配置与操作，用v-for动态渲染控件，computed和watch处理联动校验，最终结构化组装查询参数。
Vue 3 中处理多维度筛选条件的动态生成，核心在于把“字段配置”和“用户操作”解耦，用数据驱动视图，而不是硬写一堆 v-if 堆砌逻辑。关键不是控件怎么渲染，而是条件结构怎么设计、怎么联动、怎么传给后端。
定义可扩展的条件 Schema
每个筛选项不是独立存在，而是一组有明确语义的配置对象。例如：
-
field：对应数据库字段名（如
orderNo、createTime） -
operator：操作符（
eq、gt、like、between、isNull） -
value 或 values：单值或区间值（如
"2024-01-01"或["2024-01-01", "2024-12-31"]） -
type：字段类型（
string、number、date、select），决定该显示输入框、日期选择器还是下拉列表
前端维护一个 ref 数组，如 conditions = ref([])，每新增一条，就 push 一个符合上述结构的对象。
按 Schema 渲染对应控件
不靠手写多个 v-if 分支，而是用统一入口分发：
立即学习“前端免费学习笔记（深入）”；
- 用
v-for遍历conditions，每个 item 绑定到独立子组件（如FilterItem） - 子组件内根据
item.type和item.operator决定渲染什么：
—type="date"且operator="between"→ 显示<el-date-picker type="daterange">
—type="select"→ 请求对应选项接口，渲染<el-select>
—operator="isNull"→ 隐藏 value 输入区，只保留字段+操作符
这样新增一种字段类型或操作符，只需在子组件里加一个分支，不影响其他逻辑。
条件联动与值校验自动适配
真实业务中，筛选条件之间常有依赖关系。比如选了“订单状态=已取消”，就不该再填“发货时间”；选了“金额范围”，就要禁用“等于”操作符。
- 用
computed动态计算某字段可用的操作符列表：operatorsForField(field)返回不同type下合法的operator数组 - 用
watch监听conditions变化，触发清理逻辑：当某条被删掉或 operator 改为isNull，自动清空它的value - 校验规则也从 schema 派生：字段设
required: true且operator非空值类时，才校验value是否为空
组装查询参数并提交
提交前不做字符串拼接，而是结构化转换：
- 遍历
conditions，过滤掉field和operator为空的项 - 对每条有效条件，按后端约定格式转换：
—{ field: "amount", operator: "gt", value: "100" }→{ amount: { $gt: 100 } }
—{ field: "createTime", operator: "between", values: ["...", "..."] }→{ createTime: { $gte: "...", $lte: "..." } } - 最终合并成一个对象，作为请求 payload 发送给 Spring Boot 接口
后端用 MyBatis 的 <if> + <choose> 动态拼 SQL，前后端结构保持一致，扩展新条件几乎不用改代码。
