多条件筛选应使用统一data-filter-key标记筛选项，包裹日期范围、用替代多checkbox，搜索按钮触发防抖请求并校验空值与状态，后端2xx且data存在才更新表格。
多条件筛选的 DOM 结构怎么组织才方便 JS 控制
直接用多个 <input type="text"> 和 <select></select> 拼一起不难，但关键在「可扩展性」和「状态同步」。推荐用统一的 data-filter-key 属性标记每个筛选项，值对应后端字段名（比如 data-filter-key="status"、data-filter-key="created_after"），避免 JS 里硬编码字段映射。
常见错误是把日期范围拆成两个独立 input 却没做联动校验——用户可能填了「开始时间 > 结束时间」，前端不拦截，后端返回 400 或静默过滤，体验断层。
建议做法：
- 日期范围用一个
<div class="date-range"> 包裹两个 <code><input type="date">，并加data-filter-key="created_range" - 状态多选用
<select multiple></select>而非一堆 checkbox，减少 DOM 节点，也方便取值为数组 - 搜索按钮旁加「重置」按钮，点击后清空所有筛选项并触发一次空条件请求，别只清 UI 不清 JS 状态
-
type="date"且值非空 → 保留为"2024-05-01"字符串；若为范围，则合并为{ "gte": "2024-05-01", "lte": "2024-05-10" }对象 -
<select multiple></select>→ 取selectedOptions，转成字符串数组，空数组跳过 - 数值输入框（如 ID、页码）→ 用
Number()转换，NaN则丢弃 - 搜索关键词输入框 → 去首尾空格，空则跳过
JS 怎么把表单值转成合法的 API 查询参数
浏览器原生表单提交会把空字符串、未选 <select></select>、未勾选 checkbox 当作有效值传出去，后端要么报错，要么查出意外数据。必须手动收值 + 过滤。
立即学习“前端免费学习笔记（深入）”；
核心逻辑是：遍历所有带 data-filter-key 的元素，忽略空值（''、null、undefined、空数组），再按字段类型做归一化：
示例片段：
function getFilters() {
const filters = {};
document.querySelectorAll('[data-filter-key]').forEach(el => {
const key = el.dataset.filterKey;
let value;
if (el.type === 'date' && el.hasAttribute('data-range-end')) {
const start = document.querySelector('[data-filter-key="created_range"][data-range-start]');
const end = el;
if (start.value && end.value) {
filters[key] = { gte: start.value, lte: end.value };
}
return;
}
if (el.tagName === 'SELECT' && el.multiple) {
value = Array.from(el.selectedOptions).map(o => o.value);
if (value.length === 0) return;
} else {
value = el.value?.trim();
if (!value) return;
}
filters[key] = value;
});
return filters;
}
防抖 + 请求中状态反馈为什么不能省
用户连点两次「搜索」，发两遍相同请求，后端压力白增，UI 还可能显示旧数据覆盖新结果。必须加防抖（推荐 300ms）+ 请求锁。
更隐蔽的问题是：筛选项变化时（比如改了下拉框），立刻触发搜索，但用户还没选完——比如状态选了「待审核」，正要点「已通过」，中间一次无效请求就发出去了。
解决方案：
- 搜索按钮绑定点击事件，**不监听 input/change 实时触发**；只有用户明确点击才查
- 按钮点击后立即
disabled，接口返回后再恢复，防止重复提交 - 如果真要支持「输完回车即搜」，给 input 加
keyup.enter，但务必加防抖，且只对文本类输入生效（日期、下拉框不响应） - 加载中显示 skeleton 或「搜索中…」文字，别让界面静止不动
后端返回空数组时前端该不该清空表格
应该清，但得区分「无数据」和「请求失败」。常见错误是把 401、500、网络中断都当成「没查到」，清掉原有列表，用户以为筛选条件写错了，反复调。
正确做法：
- 仅当 HTTP 状态码为 2xx 且响应体中 data 字段存在（哪怕为空数组）时，才更新表格数据
- 其他情况（包括超时、解析失败、status !== 200），保留上次成功数据，并在 UI 顶部用
<div class="alert"> 提示错误（比如「服务暂时不可用，请稍后重试」） <li>不要自动重试，除非用户手动点击「重试」按钮；否则可能掩盖真实问题（比如筛选条件含非法字符导致 400）</li> <p>多条件筛选真正难的不是拼参数，而是边界状态的处理：空值含义、字段依赖（比如选了「部门」才显示「员工」下拉）、权限导致的字段隐藏。这些没法靠一套通用代码解决，得在每个筛选项上留好钩子，比如 <code>data-required-if="dept_id"。
