必须用 包裹，别手写 div + JS 拼参数；正确利用 form.elements、FormData、form.reset() 等原生能力，确保 name 与后端参数一致、多选用同名 checkbox、价格区间拆为独立字段、单次 filter 合并条件、数值比较前类型转换、移动端适配 label 和 URL 同步。

必须用

包裹，别手写 div + JS 拼参数

不用

的筛选组件，三个月后基本没法维护。你得手动遍历所有 input、判断 type、处理 checkbox 多选、过滤空值、拼 query string——哪天加个动态品牌下拉，name 漏写一个，整个筛选就静默失效。

正确做法是：form 元素天然支持：

• form.elements 直接拿到所有控件，包括 select[multiple] 和未选中的 checkbox
• new FormData(form) 自动忽略未选中的 checkbox、合并同名 name（如多个 brand）、跳过 disabled 项
• form.reset() 一键还原所有字段初始值，前提是它真是个 form

常见错误：<div class="filter-form"> 里塞一堆 <code>input，然后 JS 里用 document.querySelectorAll('[name]') 硬捞——这等于放弃浏览器原生能力，自己造轮子还漏气。

name 属性必须和后端 API 参数名完全一致

前端 name="price_min"，后端接口就要接收 ?price_min=100。不一致的后果不是报错，而是“看起来能点、点完没反应”——因为后端根本收不到那个字段。

立即学习“前端免费学习笔记（深入）”；

特别注意这些坑：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• name="brand[]" 是 PHP 风格，在纯 HTML/JS 场景下无效；FormData 不识别方括号，后端收到的是 brand[]=apple 这种乱码
• 价格区间必须拆成两个独立字段：<input name="price_min"> 和 <input name="price_max">，别试图用一个 range 或自定义 data- 属性再切分
• 多选品牌用多个 <input type="checkbox" name="brand" value="apple">，不是 name="brands" 或 name="selected_brands"

筛选逻辑必须用单次 filter 回调合并所有条件

链式调用 .filter().filter().filter() 看起来清晰，实际会反复创建新数组，中间某次把数据筛光了，后面条件就白写了。嵌套 if 更容易漏掉“全部条件都为空时应显示全部”的逻辑。

正确结构是：遍历每行（或每个数据项）时，对每个条件单独计算布尔值，再用 && 连接：

const matchesName = !nameVal || row.cells[0].textContent.includes(nameVal);
const matchesDept = !deptVal || row.cells[1].dataset.dept === deptVal;
const show = matchesName && matchesDept;

关键点：

• 每个条件默认返回 true（即“不限制”），避免空输入导致整行被隐藏
• 精确匹配优先用 data- 属性存真实值（如 data-role="team_lead"），别依赖单元格文本——文本可能带空格、换行或富文本标签
• 数值比较前务必用 parseFloat() 或 parseInt() 转换，否则 '100' 会返回 <code>true

移动端和 URL 同步是高频翻车点

筛选组件在桌面能跑，在手机上点不中、输不了、关不掉，大概率是三个地方没处理好：

• label 没包住 input 或 checkbox，导致触摸热区太小；正确写法：<label><input type="checkbox" name="tag"> Vue</label>
• 没同步 URL：用户刷新页面，筛选条件全丢。解决方法是每次筛选后用 history.replaceState() 把 FormData 序列化进 query string
• 弹窗用 <dialog></dialog> 时，Safari 15.4+ 才支持 showModal()，低版本需降级为 display: none + 手动管理焦点和 backdrop

最易被忽略的是：筛选状态变更后，UI 高亮（比如已选标签加 active 类）和 URL 参数必须严格一一对应——否则用户复制链接发给别人，对方看到的和你本地不一致。