前端多条件筛选应优先用包裹控件并配合FormData采集数据，避免手动遍历；小数据量可JS遍历过滤，大数据量必须后端处理；需注意空值判断、多值合并、文本清洗、移动端兼容及URL同步。
前端多条件筛选不是靠一堆 if 堆出来的，小数据量（≤1000 行）直接用 JS 遍历 tbody tr + FormData 采集状态就能跑通；大数据必须交由后端拼 WHERE 条件，前端只管收参数、发请求。
为什么必须用 <form></form> 包裹筛选控件
不用 <form></form> 的后果很直接：你得手动遍历每个 input、区分 type="checkbox" 和 select[multiple]、处理空值、拼 query string——稍一改 DOM 结构，JS 就断。而 <form></form> 天然支持：
-
form.elements直接拿到所有控件，包括动态渲染的select[multiple] -
new FormData(form)自动忽略未选中的checkbox、合并同名name（如多个brand）、跳过disabled项 -
form.checkValidity()可配合required做基础校验，不用自己写正则
常见错误：把 <form></form> 改成 <div class="filter-form">，然后 JS 里用 <code>document.querySelectorAll('[name]') 硬捞——一旦漏写 name 或拼错，整个采集逻辑就失效。
FormData 怎么读取多条件并安全转对象
别在每次筛选时手动拼对象，FormData 是最稳的入口。关键点是：它不自动过滤空值，得你自己判断。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 同名
checkbox（如name="brand"）被选中时，FormData会自动收集所有值，无需额外处理 -
price_min和price_max可能为空字符串，需显式判断：if (minVal !== "" && maxVal !== "") { ... } - 用
Array.from(formData.entries())转为键值对数组，方便后续filter：[["brand", "apple"], ["rating", "4"]] - 避免用
Object.fromEntries(formData)直接转对象——如果某个name对应多个值（如多选品牌），后者只会保留最后一个
前端实时过滤时怎么避免漏行或错显
链式 .filter().filter() 会反复创建新数组，中间某次过滤把行筛没了，后续条件就无从判断；嵌套 if 容易漏掉“全部条件都满足”的语义。正确做法是单次遍历 + 合并布尔表达式：
- 每个条件默认返回
true（即“不限制”），避免空输入导致整行被隐藏 - 精确匹配建议清洗文本再比对：
const cleanCell = cell.textContent?.trim().replace(/[\s\uFEFF\xA0]+/g, ' ')，输入框也做同样清洗 - 优先用
data-*属性存真实值（如data-role="team_lead"），别依赖显示文本做===判断 - 所有输入框共用一个回调函数（如
onFilterChange()），一次性读取全部值再执行过滤，避免竞态覆盖
移动端和 URL 同步容易被忽略的点
这些不是锦上添花，而是上线前必查项：
- 复选框
label必须包住input，否则 iOS Safari 点不中；touch 区域至少 44×44px - 刷新丢失筛选？得把
FormData序列化进 URL query string（如?brand=apple&rating=4）或localStorage - 多选
select在部分安卓浏览器里不触发change事件，建议监听input事件代替 -
input[type="color"]在 Safari 13.1+ 才支持，旧版会退化为文本框，且值始终是 7 位小写十六进制（#a3c4ff），比对前别粗暴去#
