reload 时搜索参数未清空,是因为 table.reload() 默认沿用缓存的 where 参数;正确做法是显式传入 where: {} 和 page: { curr: 1 }。
reload 时搜索参数没清空,是因为 where 缓存没重置
layui 的 table.reload() 默认不会覆盖或清空上次请求带的 where 参数,尤其在用 form.on('submit(...)') 提交搜索条件后,这些参数会一直附着在表格实例的配置里。你调 reload(),它只是“再发一次带旧 where 的请求”,不是“重新开始”。
- 常见错误现象:
table.render()初次加载正常,但点“重置”按钮后调table.reload(),接口仍收到旧的keyword、status等字段 - 根本原因:layui 表格实例内部维护了一份
config.where,reload()若不显式传参,就沿用这份缓存 - 正确做法:每次 reload 都要主动传一个干净的
where: {},而不是只写{}或漏掉它
必须显式传空 where: {},不能靠删 DOM 或重置 form 代替
有人以为清空搜索表单(比如 form.val('search', {}))就够了,其实没用——表格请求参数和表单值是两套逻辑。layui 不会自动把 form 值同步进 where,除非你在 submit 回调里手动取值并塞进去。
- 使用场景:点击“重置”按钮时,既要清表单,也要让表格下次请求不带任何搜索条件
- 实操建议:在重置逻辑里,同时做两件事:
form.val('search', {})+table.reload('yourTableId', { where: {} }) - 注意参数差异:
where是对象,不是字符串;写成where: null或where: undefined依然会继承旧值,只有where: {}才真正清空
如果用了 page: { curr: 1 },记得一起重置页码
单纯清 where 不够,用户可能在第 5 页搜了内容,重置后还停在第 5 页,但第 5 页没数据——因为新请求没匹配项,后端只返回了空数组,前端却没跳回首页。
- 性能影响:不重置页码会导致无意义的空响应,浪费一次请求
- 兼容性注意:老版本 layui(2.5.6 之前)对
page.curr的处理有 bug,建议升级到 2.8+ 或手动加page: { curr: 1 } - 推荐写法:
table.reload('yourTableId', { where: {}, page: { curr: 1 } })
封装成函数时,避免闭包里引用旧 where
如果你把 reload 写在事件回调外、用变量存了初始 where,然后反复修改这个对象再传入 reload,那等于一直在改同一个引用——改来改去还是那个对象,清不干净。
- 容易踩的坑:写成
let searchWhere = {}; ... searchWhere.keyword = val; table.reload({ where: searchWhere }),后续不清空searchWhere就永远带着历史值 - 安全做法:每次 reload 都新建对象,比如
where: { keyword: '', status: '' },或者直接where: {} - 复杂点在于:如果有动态字段(比如时间范围、多选 tag),不能只清空对象,还得确保后端能识别空字符串/空数组为“忽略该条件”,否则可能查出意外数据











