Layui table 的 data 模式需手动实现前端搜索：先深拷贝原始数据，监听 input 事件，用 filter 筛选并处理 null/undefined，reload 时传新 data 和 page: { curr: 1 }。
layui table 的 data 模式下怎么加前端搜索
直接改 table.reload() 不行，得自己过滤原始数据再重载。layui 的表格默认不带前端搜索逻辑，它只负责渲染，搜什么、怎么筛，得你手动做。
适用场景：数据量不大（比如 ≤ 2000 条），用的是本地 data 数组而非 url 远程分页；你想在输入框敲字时实时过滤整表。
- 先存一份原始数据（比如叫
originData），别直接操作table.config.data，那只是渲染快照 - 监听搜索框的
input事件，用Array.filter()筛字段，注意大小写和空格处理 - 调用
table.reload()时传入新data，别漏掉page: { curr: 1 }，否则页码错乱
let originData = [...yourData];
document.getElementById('searchInput').addEventListener('input', function() {
const val = this.value.trim();
const filtered = val
? originData.filter(item => item.title?.includes(val) || item.id?.toString().includes(val))
: originData;
table.reload('demo', { data: filtered, page: { curr: 1 } });
});
搜索多个字段时怎么避免漏匹配或误匹配
直接连写 || 容易出问题：某个字段是 null 或 undefined，.includes() 就报错；全字段模糊搜又容易把 “12” 匹配到 “123” 和 “abc12def” 里，用户未必想要。
- 每个字段检查是否为字符串，用
String(item.xxx).includes(val)最省事 - 想精确匹配数字 ID？用
item.id == val（双等，兼容字符串输入） - 要支持多字段“任一匹配”，别用正则拼接，老老实实用多个
||判断更可控 - 中文搜索慎用
indexOf，部分字体下可能有兼容性问题，includes更稳
table.render() 里设了 url 还能前端搜吗
不能——只要配置了 url，Layui 就默认走后端分页，所有 data 相关操作都会被忽略，reload 传 data 也无效。
- 硬要前端搜，只能切回
data模式：先用 AJAX 拿一次全量数据，存起来，再 render 时用data而非url - 如果数据真大（> 5000 条），浏览器可能卡，这时该上虚拟滚动或后端模糊查询，别硬扛
- 别试图在
parseData回调里偷偷改返回数据来“模拟”前端搜——parseData只影响单页解析，不影响全局过滤逻辑
为什么输完回车没反应，或者清空后表格空白
大概率是 table.reload() 传参不全，或者原始数据引用被意外修改了。
- 清空时传了个空数组
[]，但没重置page.curr，导致显示第一页的 0 条——看着像空白，其实是分页器还在那儿 - 用了
splice()或filter()但没赋值给新变量，结果originData被污染，后续搜不了 - 搜索框绑的是
change而不是input，导致敲字不触发，必须失焦才搜 - 表格
id写错了，table.reload('wrongId')静默失败，控制台也没提示
最麻烦的其实是数据引用——originData 如果是接口返回的原对象，又在其他地方被改过（比如加了 checked 字段），过滤时就可能出意料之外的结果。真要省心，一开始就 JSON.parse(JSON.stringify(data)) 深拷一份。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
