Layui表格获取可视区域内行索引需手动计算：定位tbody容器，用getBoundingClientRect()判断tr是否在滚动视口内，取其DOM顺序索引；注意必须相对于tbody而非window，且idx对应当前页table.cache数据位置。
layui表格如何获取可视区域内的行索引
layui 的 table 组件本身不提供“当前可视行索引”的原生 API，必须结合 DOM 滚动状态和表格容器布局手动计算。核心思路是：拿到表格 body 区域的滚动位置、可视高度，再遍历 tr 元素判断其是否在视口内。
为什么不能直接用 table.cache 或 table.getData()
这两个方法返回的是全部数据或缓存数据，与 DOM 渲染顺序、分页、虚拟滚动（如果启用了）都可能不一致。尤其当开启 height 参数启用固定表头时，tbody 是独立滚动容器，行元素的 offsetTop 相对于 tbody 而非整个页面——忽略这点会导致计算结果全错。
手动计算可视行索引的实操步骤
假设你的表格实例已初始化为 tableIns，且启用了固定高度（即存在独立滚动的 tbody）：
- 用
tableIns.elem找到表格 DOM，再定位到tbody.layui-table-body元素 - 获取该
tbody的scrollTop、clientHeight和scrollHeight - 遍历
tbody.querySelectorAll('tr')，对每个tr调用getBoundingClientRect()（注意：必须相对于tbody容器，不是window） - 判断
rect.top >= 0 && rect.top 即为可见（简单版）；更严谨可加上 <code>rect.bottom > 0避免底部刚滚出的行被误判
示例代码片段：
const tbody = tableIns.elem.querySelector('.layui-table-body tbody');
const scrollTop = tbody.scrollTop;
const clientHeight = tbody.clientHeight;
<p>const visibleIndices = [];
tbody.querySelectorAll('tr').forEach((tr, idx) => {
const rect = tr.getBoundingClientRect();
const tbodyRect = tbody.getBoundingClientRect();
// 转换为相对于 tbody 的 y 坐标
const yInTbody = rect.top - tbodyRect.top;
if (yInTbody >= 0 && yInTbody < clientHeight) {
visibleIndices.push(idx);
}
});
console.log(visibleIndices); // 如 [5, 6, 7, 8]</p>容易踩的坑和兼容性注意点
常见错误包括：直接用 window.scrollY 判断、把 tr.offsetTop 当作绝对坐标、忽略表格有无固定列（固定列会额外生成 tbody）、未处理空数据时 tr 不存在等。
- layui 2.8+ 在开启
fixed: true时会渲染两个tbody（主表体 + 固定列），需明确指定目标tbody - 若表格启用了
page: false且数据量极大，建议加节流（如requestAnimationFrame）避免频繁计算卡顿 -
getBoundingClientRect()在 Safari 旧版本中对隐藏元素返回{top: 0, left: 0}，建议先检查tr.offsetParent !== null - 行索引（
idx）是 DOM 顺序索引，不是原始数据索引；如需对应原始数据，得通过table.cache[tableName][idx]查，但要注意分页时cache只存当前页
真正难的不是算出哪些行在视野里，而是确保每次滚动后你拿的都是正确的容器、正确的坐标系、以及和业务逻辑匹配的“索引”含义——DOM 层、数据层、分页层三者稍一错位，结果就不可信。
