Layui表格data模式下多条件前端过滤需存原始数据、监听表单、构造统一校验函数并调用table.reload({data: filtered, page: {curr: 1}})；where参数在此模式下无效。
data模式下多条件前端过滤怎么写
只有用 data 配置加载本地数据时，才能真正做前端多条件过滤。一旦用了 url，table.reload() 传 data 参数会被忽略，白写。
核心是：存原始数据、监听表单变化、构造筛选逻辑、重载时带 page: { curr: 1 }。
- 原始数据必须深拷贝或独立声明（比如
const originData = JSON.parse(JSON.stringify(rawData))），别直接引用table.config.data—— 那只是渲染快照，reload 后可能已变 - 每个字段筛选前先做类型兜底：
String(item.name)?.includes(val)，避免undefined?.includes报错 - 数字 ID 精确匹配用
item.id == val（双等），兼容字符串输入；模糊搜用String(item.id).includes(val) - 多个字段“任一匹配”就老老实实写
cond1 || cond2 || cond3，别拼正则，难调试还容易漏边界
where参数在前端过滤里根本没用
table.reload() 的 where 参数只对 url 模式生效，走 AJAX 请求时它会自动拼成 query string 发给后端。你在 data 模式下传 where，Layui 完全不处理，也不会影响本地数据过滤逻辑。
常见错误：以为加了 where: { name: '张' } 就能触发前端筛，结果表格纹丝不动——因为 where 在 data 模式下是纯摆设。
真要多条件，就得自己写 JS 过滤：
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
const filtered = originData.filter(item => {
const matchName = !nameVal || String(item.name)?.includes(nameVal);
const matchStatus = !statusVal || item.status == statusVal;
const matchCity = !cityVal || String(item.city)?.includes(cityVal);
return matchName && matchStatus && matchCity; // 全部满足才保留
});
filter: true 列筛选和多条件不是一回事
filter: true 是列级单字段枚举筛选，点击漏斗图标弹出当前列所有去重值供勾选，它不支持文本输入、不支持跨字段组合、也不支持模糊匹配。
它只对 data 模式有效，且基于 templet 渲染后的文本去重——比如原始数据是 { status: 1 }，但你用 templet 显示为“启用”，筛选框里出现的就是“启用”，不是数字 1。
- 别指望它实现“姓名含张 + 状态为启用”的联动，点了第二列就会清掉第一列
- 字段值离散度高（如 ID、时间戳）时开启
filter: true反而拖慢初始化，因为要遍历全部行提取显示文本 - 服务端分页下它基本失效——弹窗只显示当前页的数据去重结果，不可靠
清空搜索后表格空白？大概率 page 没重置
输完关键词再清空输入框，表格变空，不是数据丢了，而是 table.reload() 没传 page: { curr: 1 }，导致分页器还在第 5 页，但 filtered 数据只有 2 条，Layui 默认只渲染当前页的 10 条（空数组），看着就是空白。
更隐蔽的问题：原始数据被意外修改。比如你用 originData.push(...) 动态增删，后续 filter 就基于脏数据跑了。
- 每次 reload 前，确保传的是干净的
filtered数组，不是原数组的引用 - 清空时别传
[]，要传完整原始数据副本：table.reload('demo', { data: originData, page: { curr: 1 } }) - 如果用了
deep: true，注意它会合并上次 reload 的参数，可能把旧where带进来，干扰前端过滤
