小数据量（≤1000行）表格实时过滤应使用filterTable()遍历DOM，统一用data-属性存原始值，row.style.display控制显隐，移动端防抖+change事件更稳，筛选区与列表区须分离布局。
小数据量用 filterTable() 实时遍历 DOM 行
表格行数 ≤ 1000 时，前端 JS 实时过滤最直接：监听所有筛选控件的 input 或 change 事件，每次触发就遍历 tbody tr，逐行比对非空条件。
关键点不是“全写一遍”，而是统一提取逻辑：
- 每个
tr的匹配判断必须是「所有非空条件都满足」，不能漏掉任意一个（比如品牌选了但价格没填，仍要参与品牌过滤） - 用
data-属性存原始值（如data-price="299"），避免依赖单元格文本被格式化干扰（如 “¥299.00” 无法直接转数字比较） -
row.style.display = show ? '' : 'none'比classList.toggle()更轻量，不触发重排重绘 - 移动端慎用
input事件监听搜索框——iOS 虚拟键盘收起延迟会导致最后一次输入被忽略，改用change+ 手动触发一次过滤更稳
筛选控件布局必须脱离 row 容器
用 Bootstrap 做响应式筛选区时，常见错误是把 input、select 塞进和列表同一级的 row 里。这会导致小屏下筛选项和卡片挤成一列、断点切换错位、间距失控。
正确结构只有两层独立容器：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 筛选区：单独放在
row外，加py-3或mb-4留白 - 列表区：用独立
<div class="row"> 包裹所有卡片，卡片自身用 <code>col-12 col-sm-6 col-md-4 col-lg-3（顺序不可颠倒） - 筛选控件宽度控制：小屏用
w-100，中屏以上用col-md-auto并排，不占满整行
querySelectorAll() 配合 Array.from() 做条件组合
多个筛选字段（如姓名、状态、分类）共存时，别写一堆嵌套 if。用数组 reduce 或 filter 组合条件更清晰：
function matches(row, filters) {
return Object.entries(filters).every(([key, value]) => {
if (!value) return true;
const cell = row.cells[getColumnIndex(key)];
return cell.textContent.includes(value) ||
cell.dataset[key] === value;
});
}
<p>const rows = Array.from(document.querySelectorAll('#list tbody tr'));
const visibleRows = rows.filter(row => matches(row, currentFilters));
注意：querySelectorAll 返回的是 NodeList，必须转成数组才能用 filter；getColumnIndex() 应预先缓存列名到索引的映射，避免每次重复查找 th 文本。
移动端触控与性能容易被忽略的细节
实时过滤在手机上卡顿，往往不是逻辑问题，而是交互细节没处理好：
- 别在
input事件里直接调用完整过滤函数——用户快速滑动 range 滑块或连打文字时会高频触发，加setTimeout防抖（300ms 合理） - 颜色/品牌等 checkbox/radio 组，用
change事件而非click，避免 Safari 对 label 点击的兼容性差异 - 筛选后更新列表时，禁用
innerHTML = ''清空再拼接——会丢失 Bootstrap 的 data-bs-* 绑定，应document.querySelectorAll('.grid-item').forEach(el => el.remove())后逐个createElement - range 滑块联动（如最低价不能超最高价）必须双向绑定，且修改一个时要手动触发另一个的
input事件，否则视图不同步
