静态表格前端搜索应使用 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 时数据源错位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！