唯一标准方案是rowStyle回调配合skin: 'nob',因Layui默认行高一致,仅rowStyle可在每行渲染时动态设高,且必须搭配skin: 'nob'避免border-collapse干扰。
rowStyle回调配合skin: 'nob'是唯一标准方案
直接写css或改cellminheight无法按行数据动态设高,layui表格默认所有行高度一致。真正生效的只有rowstyle——它在每行渲染时执行,返回class或内联样式,且必须搭配skin: 'nob'使用,否则border-collapse: collapse会干扰height生效。
常见错误现象:加了rowStyle但行高没变,大概率是漏了skin: 'nob',或用了skin: 'line'后没补table-layout: fixed和强制td高度。
-
rowStyle函数接收row参数,可读取row.status、row.level等字段做判断 - 返回对象如
{class: 'row-urgent', style: 'height: 60px; line-height: 60px;'} - CSS中必须显式写死
.row-urgent td { height: 60px; line-height: 60px; box-sizing: border-box; },不能用min-height - 若开发者工具里看到
tr的display不是table-row,需补.row-urgent { display: table-row !important; }
done回调里用layui.$遍历修正最稳妥
当rowStyle不适用(比如要根据内容实际撑开高度),就得等渲染完成再手动设height。Layui会在done回调触发时把DOM挂载完,但此时表格内部尺寸可能还没同步,所以必须套一层setTimeout(, 0)。
常见错误现象:done里直接layui.$(tr).height()返回40,或设了height但文字上下偏移——因为没清掉旧的line-height。
- 在
done里用layui.$(elem).find('tbody tr')遍历当前页所有tr - 对每行取其
td中最大的scrollHeight,加12左右padding余量 - 同时设
tr.style.height = h + 'px'和tr.style.lineHeight = 'normal' - 务必加
!important:用layui.$(tr).css('height', h + 'px !important')
分页/搜索/resize后行高丢失怎么办
每次reload、翻页、搜索或调用table.resize(),Layui都会重建tbody,之前写的height全部清空。这不是bug,是Layui渲染机制决定的。
容易被忽略的点:虚拟滚动开启时(limit > 100),done回调里的tr只包含当前可视区域行,但reload后done仍会触发——你得确保重设逻辑能覆盖新加载的行,而不是只跑一次。
- 把行高修正逻辑抽成独立函数,例如
adjustRowHeight(elem, data) - 在
done、reload成功回调、以及layui.admin.resize事件里都调用它 - 如果用了虚拟滚动,遍历时用
document.querySelectorAll('.layui-table-body tbody tr:is(:visible)')代替全量querySelectorAll - 避免在
templet里直接写style="height:...",Layui会覆盖;统一走JS注入
templet撑开高度只适用于内容换行场景
如果行高差异来自某列文本换行(比如日志详情、用户备注),用templet配合cellMinHeight比JS修正更轻量。但前提是内容真能折行,且不被white-space: nowrap锁死。
性能影响明显:每行都测offsetHeight在1000+行时会卡顿,而templet是纯CSS驱动,无运行时开销。
- 列配置加
cellMinHeight: 40,保证基础高度 -
templet返回带style="word-break: break-word; white-space: pre-wrap; padding: 8px;"的div - 确保该列
style没写white-space: nowrap,也没设maxHeight或overflow: hidden - 若内容含HTML标签,用
layui.util.escape()转义后再插入,否则pre-wrap失效











