应使用 row 回调函数而非 done 回调，在 row 渲染完成时通过 rowElem.addClass() 添加 class，确保分页、虚拟滚动等场景下样式始终生效。
layui table.render 时如何给某行加 class
直接在
的
回调里操作 DOM 是错的——此时表格可能还没完成重绘，或者分页后 class 会丢失。正确做法是用
参数，在
渲染完成后的钩子中处理。
回调函数会在每一行渲染完毕后触发，参数
是数据对象，
是该行的
table.renderdonerowElemrowrowrowrowElem
元素，可直接调用
addClass
这个回调只对当前页生效，但 layui 内部会为每页重新触发，所以翻页后依然有效
注意：不能在
row
回调里修改
row
数据本身（比如加字段），否则可能影响排序、搜索等逻辑
table.render({
elem: '#demo',
url: '/api/list',
cols: [[{field:'id', title:'ID'}, {field:'name', title:'姓名'}]],
row: function(row, rowElem){
if (row.status === 'disabled') {
rowElem.addClass('tr-disabled');
}
}
});
为什么不用 done + tbody.find(‘tr’) 手动加 class
因为
done
触发时，表格 DOM 可能尚未完全就绪（尤其开启
loading
或有动画时），且分页切换后不会再次触发
done
，导致新页的行缺失 class。
done
是“数据加载完成”的回调，不是“DOM 渲染完成”的保证
手动遍历
tbody tr
在服务端分页场景下会漏掉未加载的数据行
如果表格启用了
height
和虚拟滚动，
tbody
里只存在可视区域的
tr
，其他行根本不在 DOM 中
自定义 class 生效但样式不显示？检查这几点
layui 表格默认给
tr
加了
layui-table-hover
这类内联样式，可能覆盖你的 CSS 权重。
确保 CSS 选择器足够强，比如用
table .tr-disabled > td
而不只是
.tr-disabled
不要写成
tr.tr-disabled
—— layui 的
tr
是带
data-index
的，但 class 是直接加在
tr
上的，选对元素就行
如果用了
skin: 'line'
或
'nob'
，检查是否 CSS 被皮肤样式重置了边框/背景
想根据多条件动态加多个 class 怎么写
直接在
row
回调里链式判断，但别嵌套太深，保持可读性。
用
switch
或提前 return 比连写 if-else 更清晰
避免重复调用
rowElem.addClass()
，可以先拼好 class 字符串再一次性加
注意空值判断：比如
row.tags && row.tags.includes('vip')
，防止
undefined
报错
row: function(row, rowElem){
const classes = [];
if (row.score > 90) classes.push('high-score');
if (row.type === 'admin') classes.push('admin-row');
if (classes.length) rowElem.addClass(classes.join(' '));
}
layui 的
row
钩子看着简单，但实际要留意它和数据更新、重绘、虚拟滚动之间的时机关系——多数样式问题，其实都出在误判了“什么时候 DOM 真的 ready”。
相关文章