rowStyle是唯一可靠方式,必须在table.render()初始化时传入,返回驼峰式CSS属性对象(如{backgroundColor: '#fff'}),翻页排序自动重执行;不可后期patch,字段名须与cols中field严格一致。

rowStyle 回调是唯一可靠方式
layui table 渲染时不会自动根据字段值更新行样式,rowStyle 是官方支持且能随翻页、排序、筛选自动重执行的唯一入口。它必须在 table.render() 初始化时传入,后期无法 patch 或动态挂载。
返回值必须是驼峰式 CSS 属性对象(如 {backgroundColor: '#fff'}),不能是字符串或内联样式字符串;返回 null 或空对象则不加样式。
- 字段名必须和
cols中定义的field严格一致,比如列配置为{field: 'status'},回调里就得用row.status - 别在
rowStyle里写$(tr).addClass()—— 这会和 layui 内部 DOM 重建逻辑冲突 - Layui 2.8+ 稳定支持
rowStyle,2.5.x 及更早版本需退回到done回调中手动操作
table.render({
elem: '#demo',
url: '/api/list',
cols: [[
{field: 'status', title: '状态'},
{field: 'name', title: '名称'}
]],
rowStyle: function(row) {
if (row.status === 'error') {
return {backgroundColor: '#ffebee', color: '#c62828'};
}
if (row.status === 'success') {
return {backgroundColor: '#e8f5e9', color: '#2e7d32'};
}
}
});
为什么加了 rowStyle 却没反应?先查这三处
常见失效不是代码写错,而是被隐性条件卡住:
-
rowStyle函数内部抛错(例如访问了row.xxx但字段不存在),整个回调静默失败,控制台可能无报错 —— 建议开头加console.log(row)确认数据结构 - 用了
table.reload()但没把rowStyle函数重新传进去,新数据加载后该函数不会自动继承 - 表格初始化时没传
id参数,导致后续table.updateCell()无法准确定位行,间接影响状态变更后的样式重绘
动态刷新某一行背景色(比如操作后实时变色)
rowStyle 不会监听数据变化自动重跑,状态变了得靠主动触发重绘:
- 最轻量做法:调用
table.updateCell(),哪怕只“假装”改一个无关字段(如field: 'status',value设为原值),也能触发整行重绘,从而再次执行rowStyle - 必须确保表格初始化时传了
id(如id: 'demo-table'),否则updateCell找不到目标实例 - 别直接改
table.cache里的对象属性 —— layui 不监听对象变更,视图不会响应
table.updateCell({
id: 'demo-table',
index: 2,
field: 'status',
value: 'processing'
});
cellStyle 和 rowStyle 混用时的优先级陷阱
如果既要整行底色,又要某列文字高亮,容易踩样式覆盖坑:
-
rowStyle返回的backgroundColor会盖掉cellStyle设置的同属性值 - 想让某列(如
score)单独标红,而其他列保持默认底色,就别用rowStyle控制整行背景,改用cellStyle针对列写判断 - 真要混合效果(比如隔行灰底 + 异常列加边框),所有逻辑都得塞进
cellStyle,用row和当前列field双重判断
复杂样式逻辑集中在一处,比分散在多个钩子里更可控,也更容易调试。











