最稳妥方案是 table.reloadData() + scrollPos: 'fixed';若用 table.reload(),须手动存取 scrollTop 并用 setTimeout 延迟恢复,且需同步设置 .layui-table-main、.layui-table-body 和固定列的滚动位置。
直接结论:用 table.reloaddata() + scrollpos: 'fixed' 是最稳妥的方案;若必须用 table.reload(),就得手动存取 scrolltop,且必须加 settimeout 延迟恢复。
为什么 scrollPos: 'fixed' 在 reloadData() 里经常失效
不是你写错了,是 Layui 源码里滚动位置恢复逻辑有两处硬伤:
-
scrollPos参数在内部被过滤掉了——比如你传了{ scrollPos: 'fixed', where: {…} },但真正进滚动恢复流程时,scrollPos已经没了 - DOM 还没重绘完就执行了
scrollTop设置,此时表格体高度可能还是旧的,赋值后立刻被后续渲染覆盖 - 固定列(
fixed: 'left')和主表体是分离的 DOM 结构,只设主表体的scrollTop,固定列不会同步滚动
用 table.reloadData() 时怎么真正让 scrollPos: 'fixed' 生效
别依赖文档写的“传进去就自动生效”,得补上两步兜底:
- 在调用前手动保存:
const savedTop = $('.layui-table-body').scrollTop(); - 在
done回调里恢复,并加setTimeout确保 DOM 渲染完成:done: function(res, curr, count) { setTimeout(() => { $('.layui-table-body').scrollTop(savedTop); // 同时同步固定列(如果有) $('.layui-table-fixed-l .layui-table-body').scrollTop(savedTop); }, 0); } - 如果用了 TreeTable,它本身支持
scrollPos: 'fixed',但必须显式配置,不能靠继承默认值
非要用 table.reload() 怎么办
table.reload() 会全量重绘,scrollPos 参数压根不被识别,只能纯手动:
- 重载前记位置:
const top = $('.layui-table-main').scrollTop();(注意是.layui-table-main,不是.layui-table-body) - 调用
table.reload('id', {...}) - 必须用
setTimeout延迟恢复,100ms 起步,太短会失败:setTimeout(() => { $('.layui-table-main').scrollTop(top); }, 100); - 固定列要单独处理:
$('.layui-table-fixed-l').scrollTop(top),否则它卡在顶部不动
最容易忽略的细节
滚动位置不是“设一次就完事”,而是三个地方要对齐:
-
.layui-table-main(整体容器) -
.layui-table-body(数据主体) -
.layui-table-fixed-l .layui-table-body(左固定列内容区)
少一个,就会出现“主表滚下去了,固定列还钉在顶上”的错位。而且不同 Layui 版本中这些类名稳定性差,建议用 tableIns.config.elem.next().find('.layui-table-body') 这种 API 方式定位,比硬写 class 更可靠。


















