直接用table.reload()传filtered data最直接，需深拷贝原始数据、逐字段安全过滤、重载时重置页码，状态如选中和滚动需手动维护。
data模式下用table.reload()传filtered data最直接
只要表格是用data数组初始化的（没配url），前端多条件过滤就该走“深拷贝原始数据 → 按字段条件filter → reload重载”这条路。硬套where参数只会无效，因为where只发给后端。
- 必须存一份原始数据副本，比如
originData = JSON.parse(JSON.stringify(rawData))，别直接操作table.config.data——那是渲染快照，改了也不影响源数据 - 每个条件字段都要判空、转字符串再比对：
String(item.status).includes(val)比item.status?.includes(val)更安全，避免null报错 -
table.reload('tableId', { data: filtered, page: { curr: 1 } })里page: { curr: 1 }不能漏，否则页码卡在第5页，新数据只显示0条 - 如果字段是数字ID想支持输入“12”匹配ID为12的行，用
item.id == val（双等），兼容用户输字符串
多字段联合筛选时怎么避免误匹配和空值崩
连写||容易翻车：某个字段是null，.includes()直接抛错；全字段搜又可能把“abc123”当“12”匹配上。得逐字段可控处理。
- 只筛明确要查的字段，别用
Object.values(item).some(...)——字段多了性能差，还容易匹配到隐藏字段（比如_id、__index） - 中文搜索统一用
includes()，别用indexOf()，某些字体下返回-1不稳定 - 空格要
trim()，但别自动toLowerCase()——用户可能真要搜大写的“API” - 日期范围字段单独处理：
new Date(item.date) >= start && new Date(item.date) ，别转字符串比
input实时触发要加防抖，不然卡死
每敲一个字就跑一遍filter()，2000条数据+5个字段，浏览器立刻卡顿。不是体验问题，是真实性能瓶颈。
- 用
setTimeout+clearTimeout做300ms防抖，示例：let timer; clearTimeout(timer); timer = setTimeout(() => { /* filter逻辑 */ }, 300) - 搜索框必须用
layui.$(this).val()取值，别用原生this.value——Layui重绘后DOM可能被替换，原生引用失效 - 多个搜索框共用一个防抖timer，避免不同输入框互相干扰
- 清空搜索时，
val.trim() === ''就直接赋回originData，别再跑一遍filter
reload后选中态和滚动位置丢失怎么办
table.reload()默认清空所有状态：已勾选的checkbox变空白，滚动条回到顶部，分页器跳回第1页——这不是bug，是设计如此。你要留，就得自己管。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 选中态用
Set存ID：window.selectedIds = new Set()，在done回调里遍历新数据，对selectedIds.has(item.id)的行手动加layui-form-checked类 - 滚动位置没法自动恢复，只能靠
table.on('page(*)', ...)监听页码变化并存scrollTop，reload后再elem.scrollTop = savedTop - 如果只是想保留当前页码（极少场景），别读
table.config.page.curr——它可能还没更新，稳妥做法是在page监听里存变量，reload时传page: { curr: savedCurr }
复杂点不在代码长短，而在状态管理——reload是粗粒度重绘，你得自己补上那些被丢掉的细节。没人帮你记住用户刚勾了哪三行，也没人帮你停在刚才看的那一屏。
立即学习“前端免费学习笔记（深入）”；
