静态表格前端搜索应使用 table.reload() 传过滤后数组，禁用 table.filter()；因其仅筛选当前页 DOM 数据，不遍历原始 data，无法实现全文搜索。
静态表格（即用 data 初始化、不配 url）做前端搜索，核心就一条：别碰 table.filter()，直接用 table.reload() 传过滤后的数组。
为什么不能用 table.filter() 做全文搜索
table.filter() 只筛当前页 DOM 渲染的数据，哪怕你关了分页，它也不读 table.cache，更不遍历原始 data 数组。你输关键词没反应，或者只变几行，大概率就是误信了“table.filter() 能全文搜”的说法。
- 它设计定位是「列级轻量筛选」，不是搜索工具
- 开启
page: true时，table.cache['id']本身就被截断为当前页数据，靠它 filter 更不可靠 - 即使
page: false，table.filter()仍只匹配已渲染的 DOM 行，不保证和原始数组完全一致
正确做法：reload + 过滤后 data
初始化时存一份原始数据副本，搜索时过滤、重载。这是唯一稳定可控的路径。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 初始化前深拷贝：用
JSON.parse(JSON.stringify(rawData))或structuredClone(rawData)（Layui 2.8+ 支持），别用浅拷贝或直接引用table.config.data - 过滤逻辑自己写：逐字段判空、转字符串、安全比对，比如
String(item.status).includes(val)，避免null?.includes()报错 -
table.reload('myTable', { data: filtered, page: { curr: 1 } })必须带page: { curr: 1 }，否则页码卡住，新数据只显示 0 条 - 中文搜索用
includes()，别用indexOf()—— 某些字体下返回 -1 不稳定
输入框绑定和防抖必须做
用户每敲一个字就 reload 一次，2000 条数据 + 多字段，浏览器立刻卡顿。这不是体验问题，是真实性能瓶颈。
立即学习“前端免费学习笔记（深入）”；
- 监听
input事件，不是keyup；加compositionstart/compositionend兼容中文输入法 - 用
setTimeout+clearTimeout做 300ms 防抖，示例：let timer; clearTimeout(timer); timer = setTimeout(() => { /* 过滤 + reload */ }, 300) - 读值必须用
layui.$(input).val().trim()，别用原生this.value—— Layui 重绘后 DOM 可能被替换 - 清空搜索时，直接赋回原始数据副本，别再跑一遍 filter
容易被忽略的细节
reload 后选中态、滚动位置、高亮行全丢 —— 这不是 bug，是 Layui 的设计行为。你要留，就得自己管：用 Set 存 ID、在 done 回调里恢复勾选、手动 scrollTo。还有，data 模式下千万别配 url，否则 table.cache 会混乱，reload 时数据源错位。
