Vue 3报表查询条件动态组合的核心是字段可配、控件可选、条件可删、提交可控：通过配置数组驱动表单渲染，每条条件独立响应式管理，提交前语义化转换并过滤空值，兼顾本地存储与重置体验。
Vue 3 中处理报表查询条件的动态组合，核心在于“字段可配、控件可选、条件可删、提交可控”。不是把所有输入框堆出来，而是按需渲染、结构清晰、状态自治。
字段配置驱动表单生成
把可查字段定义为配置数组，每个字段明确类型、标签、操作符支持范围和默认行为：
- 例如：[{ key: 'dateRange', label: '创建时间', type: 'daterange', operators: ['between', 'after', 'before'] }]
- 前端根据 type 自动选用
el-date-picker（daterange）、el-select（select）或el-input（text） - 根据 operators 动态渲染条件下拉项，避免“等于”出现在时间范围字段后
条件行独立响应式管理
每条查询条件是一个独立对象，用 ref 或 reactive 包裹，不共用同一份值：
- 添加条件时 push 新对象：
{ field: '', operator: '', value: null, id: Date.now() } - 删除用
id精准移除，不影响其他条件的绑定关系 - 时间范围类字段（如 daterange）value 存为
[startTime, endTime]数组，提交前再拆成startAt和endAt两个参数传给后端
提交前做语义化转换
用户看到的是“字段+操作符+值”，后端需要的是标准查询参数。提交时不应直接发原始 condition 列表，而应转换为后端友好的结构：
立即学习“前端免费学习笔记（深入）”；
- 例如：
{ conditions: [{ field: 'status', op: 'eq', value: 'done' }, { field: 'createdAt', op: 'between', value: ['2026-01-01', '2026-09-25'] }] } - 对空值、未填条件自动过滤，不传
value: ''或undefined给后端造成歧义 - 支持字段别名映射，比如前端用
dateRange，后端接口实际接收create_time_start和create_time_end
重置与状态保持兼顾体验
用户刷新页面后仍希望保留上次筛选习惯，但又要支持一键清空：
- 初始加载时从
localStorage或 URL query 恢复条件（如?field=status&op=eq&value=done） - 点击“重置”只清空当前表单数据，不删 localStorage；点击“默认查询”才还原预设初始值
- 用
watch监听条件变化，防抖后同步到本地存储，避免频繁写入
