layui table实现懒加载需手动接管数据：首次render初始化空表，监听.layui-table-body滚动到底部后reload追加数据，通过done回调手动append tr并resize；单次加载限20–30条防卡顿，缓存pageKey避免重复请求。
layui table 如何开启 scrollY + 异步加载配合？
原生 layui.table 不支持无限滚动（infinite scroll），只支持固定高度下的滚动条（scrolly）和「下一页」式分页。想实现懒加载，必须绕过内置分页，手动接管数据拉取和表格渲染。
关键不是开某个开关，而是把 render 拆成两步：首次用 table.render() 初始化空表结构，后续靠 table.reload() 追加行并手动拼接 DOM —— 因为 data 选项不支持增量追加，只能全量重载或自己 append。
- 不要设
page: true，否则会强制启用分页栏，干扰懒加载逻辑 -
height必须设具体值（如500），否则scrollY不生效，滚动事件无法触发 - 监听的是容器的
scroll事件，不是表格内部事件；要自己计算「是否接近底部」
如何监听滚动到底部并触发下一页请求？
layui 表格容器是 div.layui-table-box，但它的滚动条实际在子节点 div.layui-table-body 上。直接绑 scroll 到表格实例的 elem 上无效，必须精确到 body 容器。
常见错误是监听了 window 或整个表格外层，导致滚动距离计算失准，提前或延迟触发加载。
- 用
table.on('init')拿到表格实例后，通过elem.find('.layui-table-body')找到真实滚动容器 - 判断是否到底部：用
scrollTop + clientHeight >= scrollHeight - 10（留 10px 容错） - 加防抖：每次触发前检查
loading状态，避免快速滚动时重复请求 - 请求成功后，更新本地页码（如
nextPage = currentPage + 1），并缓存已加载数据
reload 时怎么避免翻页闪动、重复渲染？
table.reload() 默认会清空当前表格再重绘，如果每次都传全量数据，滚动位置会跳回顶部，体验极差。真正可行的是「仅追加新数据」+「手动插入 tr」。
所以不要依赖 data 字段 reload，而要用 done 回调拿到原始数据，再用 jQuery 操作 tbody：
- 首次渲染时设
data: []，保证结构初始化但无数据 - 每次加载新数据后，在
done回调里用elem.next('.layui-table-box').find('tbody')找到 tbody - 对每条新数据生成
<tr><td>...</td></tr>并append()进去（注意字段顺序要和cols严格对应） - 追加后调用
table.resize()同步列宽，否则可能出现错位
示例片段：
done: function(res, curr, count){<br> var tbody = elem.next('.layui-table-box').find('tbody');<br> res.data.forEach(function(item){<br> var tr = '<tr><td>' + item.id + '</td><td>' + item.name + '</td></tr>';<br> tbody.append(tr);<br> });<br> table.resize();<br>}
为什么用 layUI 的 scrollY 容易卡顿甚至假死？
因为 layUI 表格在渲染大量行（比如单次加载 100+ 条）时，会一次性生成全部 tr 节点并插入 DOM，浏览器重排压力大。这不是懒加载的问题，而是 layUI 自身 DOM 渲染策略的硬伤。
尤其在低配设备或 IE 下，滚动过程中频繁 reload + append 多个 tr，极易引发卡顿。没有银弹，只有收敛策略：
- 单次加载条数控制在 20–30 条以内，宁可多请求几次，别贪多
- 禁用
skin: 'row'等视觉增强项，减少 CSS 计算量 - 避免在
cols中写复杂模板（如嵌套lay-tpl），改用纯文本或简单templet函数 - 如果数据量长期 > 5000 行，该换
virtual scroll方案（比如用vue-virtual-scroller或原生 IntersectionObserver）
最常被忽略的一点：懒加载状态下，用户可能反复上下滚动，导致同一组数据被多次请求、多次插入。得用 Map 或 Set 缓存已加载的 pageKey，而不是只靠页码变量判断。
