table.reload()传filtered data是唯一靠谱路径:前端多条件搜索需深拷贝原始数据、逐字段判空转字符串过滤、数字id用==兼容字符串输入、中文用includes()、输入值.trim()、防抖300ms、清空时直接赋origindata、reload后手动重置页码/选中态/滚动位置。

table.reload() 传 filtered data 是唯一靠谱路径
表格用 data 初始化(没配 url)时,多条件组合搜索必须走前端过滤 + 重载。别碰 where 参数——它只发后端,前端过滤时传了也无效。
- 必须深拷贝原始数据:
originData = JSON.parse(JSON.stringify(rawData)),别动table.config.data,那是渲染快照,改了不生效 - 每个字段过滤前先判空、转字符串:
String(item.status).includes(val),比item.status?.includes(val)安全,避免null或undefined报错 - 数字 ID 搜索要兼容字符串输入:
item.id == val(双等),别用===,否则输“12”匹配不到 ID 为 12 的行 - 中文搜索统一用
includes(),indexOf()在某些字体下返回-1不稳定 - 输入值务必
.trim(),但别自动.toLowerCase()——用户可能真要搜大写的 “API”
防抖不是可选,是性能刚需
2000 条数据 + 5 个搜索框,每敲一个字就跑一遍 filter(),浏览器立刻卡死。这不是体验问题,是真实瓶颈。
- 用
setTimeout+clearTimeout做 300ms 防抖:let timer; clearTimeout(timer); timer = setTimeout(() => { /* filter逻辑 */ }, 300) - 多个搜索框共用同一个
timer变量,避免互相干扰 - 取值必须用
layui.$(this).val(),别用原生this.value——Layui 重绘后 DOM 可能被替换,原生引用失效 - 清空搜索时,
val.trim() === ''就直接赋回originData,别再跑一遍filter()
reload 后状态丢失?你得自己管
table.reload() 默认清空所有状态:勾选的 checkbox 全变空白、滚动条回到顶部、分页器跳回第 1 页。这不是 bug,是设计如此。
- 页码必须显式重置:
page: { curr: 1 }不能漏,否则新数据只显示 0 条 - 选中态建议用
Set存 ID:window.selectedIds = new Set(),在done回调里遍历当前页数据并恢复勾选 - 滚动位置需手动记录:
tableIns.elem.scrollLeft和scrollTop,reload 后再设回去 - 如果用了自定义
request函数(比如加 token),reload时必须一并传入,否则退回到默认请求逻辑
多字段联合筛选最容易翻车的三个点
连写 || 判断字段、用 Object.values(item).some() 全字段匹配、忽略空格和大小写处理——这些看似省事的操作,上线后第一个用户就会触发报错或误匹配。
- 逐字段可控处理:只筛明确要查的字段,比如
status、name、type,别扫Object.values()——字段多了性能差,还可能匹配到隐藏字段(如_id、__index) - 日期范围单独处理:
new Date(item.date) >= start && new Date(item.date) ,别转成字符串比对 - 空值字段必须提前过滤掉:
if (!val) return true,否则item.xxx.includes(val)在xxx是null时直接抛错
真正难的不是写完 filter,而是让每次 reload 后的表格看起来像没动过——滚动位置、选中态、排序标识、甚至 input 光标位置,都得你亲手接住。Layui 不替你记,也不会猜你想要什么。











