合计行不能“懒加载”计算，因其DOM在表格初始化或翻页完成时已同步渲染，仅内容为空；IntersectionObserver可监听.layui-table-total是否进入视口，在done回调中新建并监听，翻页后需重建observer，避免复用失效实例。
合计行为什么不能“懒加载”计算？
layui 的 totalrow 渲染是同步行为，表格初始化或翻页完成时（done 回调）就已生成 dom；它没有内置“滚动触达才计算”的机制。所谓“滚动到页脚才计算”，本质是**延迟执行合计逻辑**，而非延迟渲染合计行本身——合计行 dom 早已存在，只是里面空着或填了旧值。
如何用 IntersectionObserver 触发首次合计？
直接监听滚动并判断是否靠近页脚容易误判（尤其分页后 DOM 重排、fixed 列干扰），更稳的方式是用 IntersectionObserver 监听合计行是否进入视口。注意：Layui 2.8+ 的合计行有固定 class .layui-table-total，但需确保它已挂载（即 done 已执行）。
- 在
done回调里初始化 observer，避免过早监听未存在的元素 - 只触发一次计算（加
{ once: true }），防止滚动反复触发 - 计算完立即更新 DOM，别等下次滚动——否则用户看到的仍是空值
- 如果表格启用了
height（虚拟滚动），.layui-table-total可能被包裹在.layui-table-box内，需用ins.elem.closest('.layui-table-box').querySelector('.layui-table-total')精准定位
示例片段：
done: function(res, curr, count) {
const totalRow = this.elem.next().find('.layui-table-total')[0];
if (!totalRow) return;
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
const allData = table.cache[this.config.id] || [];
const sum = allData.reduce((s, d) => s + (parseFloat(d.price) || 0), 0);
$(totalRow).find('td').eq(2).text('¥' + sum.toFixed(2));
observer.disconnect(); // 仅执行一次
}
}, { threshold: 0.1 });
observer.observe(totalRow);
}
翻页后合计值不更新？必须重置 observer
每次翻页都会触发 done，但上一次的 IntersectionObserver 实例已断开或失效。若不重建 observer，新页的合计行将永远不触发计算。
- 不要在外部声明 observer 变量并复用——它绑定的是旧 DOM 节点
- 每次
done都要新建 observer 并重新 observe 新的合计行节点 - 如果合计行因分页被销毁重建（如某些自定义模板），需用事件委托或延时
setTimeout(..., 0)确保节点就绪再 observe - 服务端分页场景下，
table.cache可能为空，务必先检查table.cache[this.config.id]是否存在，否则 fallback 到res.data（但那只是当前页）
滚动触达计算的真正代价在哪？
表面上是“省了初始计算”，实际代价藏在三处：一是首次滚动延迟暴露了空合计行，用户体验断层；二是 observer 需要额外内存和回调调度；三是如果用户根本没滚到底部，你反而漏掉了关键汇总信息（比如导出报表前需要确认总数）。真正该懒的不是计算，而是**全量数据的获取时机**——如果后端支持返回 summary 字段，直接在 parseData 里塞进 table.cache，比任何滚动触发都可靠。
