Layui表格limit需随容器高度动态计算，因固定值导致小屏翻页多、大屏留白；应基于表格父容器clientHeight减去分页栏高度后除以实测行高，并节流响应resize。
为什么 limit 不能写死，而要随窗口高度动态算？
Layui 表格默认的 limit 是固定值（比如 10 或 30），但用户屏幕尺寸差异大，小屏上拉太多页、大屏却留大片空白，体验割裂。核心问题不是“能不能”，而是“不动态算就会导致：表格下方大量留白 / 滚动条过长 / 用户第一眼看不到末尾数据”。真正起作用的是表格容器可视区域高度，而不是整个窗口 window.innerHeight。
实操建议：
- 别用
window.innerHeight直接除以行高——没算表头、分页栏、内边距、滚动条占用 - 必须基于表格父容器（比如
div#table-container）的clientHeight计算 - 每行高度优先取
layui-table-body tr:first-child的offsetHeight，比硬编码更可靠 - 预留至少 48px 给分页栏（Layui 默认分页高度），否则最后一行可能被遮住
table.render() 初始化前怎么拿到真实可用高度？
Layui 渲染表格是异步的，table.render() 执行时 DOM 还没生成 .layui-table-body，所以不能在 render 里直接测行高。得把高度计算逻辑提前到容器已挂载、但表格未渲染前。
实操建议：
- 确保表格容器（如
div#demo）已在 DOM 中且有明确高度（比如height: calc(100vh - 120px)） - 用
document.getElementById('demo').clientHeight获取容器净高 - 手动估算单行高度：若用默认样式，
42是安全值（含 padding + border）；若自定义了cellMinWidth或字体，需实测 - 计算公式：
Math.max(5, Math.floor((containerHeight - 48) / rowHeight))，下限设为 5 防止归零
动态 limit 怎么塞进 table.render() 配置？
Layui 不支持 render 后改 limit 并重载，必须在初始化时就定好。很多人试图在 done 回调里调 table.reload()，结果触发两次请求——这是典型误区。
实操建议：
- 把计算出的
limit存成变量，直接传给limit字段，不要包在函数里 - 别在
done里 reload，那会多一次无意义请求；如需响应 resize，应单独监听并调table.reload() - 如果用了服务端分页，
limit变了，后端必须能正确接收并返回对应条数，否则前端显示错乱 - 示例片段：
const container = document.getElementById('table-container'); const height = container.clientHeight; const limit = Math.max(5, Math.floor((height - 48) / 42)); table.render({ elem: '#demo', url: '/api/list', limit: limit, // ...其他配置 });
resize 时要不要重新计算 limit？
要，但不能粗暴地每次 resize 都 reload。用户拖拽窗口时触发频率极高，连续 reload 会造成接口雪崩和 UI 卡顿。
实操建议：
- 加节流：用
setTimeout+ 标志位，确保 200ms 内只 reload 一次 - 只在高度变化超过 50px 时才触发 reload，避免微调误判
- reload 时传
page: { curr: 1 }，防止当前页码超出新 limit 导致空白 - 注意：
table.reload()不会重走render全流程，所以之前算的limit值不会自动更新，必须显式传入新值
表格高度适配真正的难点不在计算，而在「容器高度是否稳定」——如果父级用了 flex 但没设 min-height，或 CSS 里写了 height: auto，那 clientHeight 就是 0。这种情况下，再准的算法也拿不到数。
