应使用 rowstyle 回调而非 done 中手动操作 dom，因 data-index 仅当前页有效且样式会被重绘清空；rowstyle 随分页/排序/搜索自动执行，需传入 table.render 初始化，返回驼峰 css 对象，并注意 hover、权重及字段类型匹配。
分页本身不控制行颜色，行颜色由表格渲染逻辑决定；要让“某行在任意分页下都按状态变色”，必须用 rowStyle 回调，而不是在 done 里查 data-index 手动加样式。
为什么 done 里用 $('tr[data-index="x"]').css() 不可靠
分页切换后，data-index 是当前页内的序号（从 0 开始），不是原始数据唯一标识。比如第 1 页第 0 行和第 2 页第 0 行，data-index 都是 0，但对应不同数据。手动操作 DOM 的样式会在翻页时被 layui 重绘清空，且无法响应排序、搜索等后续操作。
- 只在
done里执行一次，后续分页/排序不会重跑 - 没绑定到数据变化，状态更新后不会自动刷新视觉
- 如果用了
skin: 'line'或even，内联style容易被覆盖或冲突
rowStyle 必须在 table.render() 初始化时传入
这是 layui 唯一能稳定作用于每行、且随分页/排序/搜索自动重执行的钩子。它接收 row（当前行完整数据）和 index（当前页内序号），返回一个驼峰式 CSS 属性对象。
- 返回
null或空对象，该行无额外样式 - 字段名必须和
cols中定义的field严格一致，比如row.status对应列配置{field: 'status'} - 不支持返回字符串，必须是对象：
{backgroundColor: '#fff'}，不是'background-color: #fff;' - 2.8+ 版本才稳定支持，旧版需升级或退到
cellStyle+ 多列重复写
table.render({
elem: '#demo',
url: '/api/list',
cols: [[
{field: 'status', title: '状态'},
{field: 'type', title: '类型'}
]],
rowStyle: function(row, index) {
if (row.status === 'error') {
return {backgroundColor: '#ffebee', color: '#c62828'};
}
if (row.type === 'urgent') {
return {backgroundColor: '#fff3cd', color: '#856404'};
}
}
});
动态更新某行状态后如何实时变色
rowStyle 不会监听数据变化自动重绘。当某条数据状态变了（比如点击按钮把 status 从 'pending' 改成 'success'），得触发 layui 重新走一遍该行的 rowStyle。
- 最轻量：调用
table.updateCell()，哪怕只“假装”改一个无关字段，也会触发整行重绘并重跑rowStyle - 必须确保表格初始化时传了
id参数，否则updateCell无法准确定位 - 不能直接改
table.cache['xxx'][index].status = 'success'—— layui 不监听对象变更 - 示例：
table.updateCell({id: 'demo', index: 3, field: 'status', value: 'success'})
容易被忽略的关键点
很多人卡在“写了 rowStyle 却没反应”，其实不是代码问题，而是三个隐性条件没满足：
- 没关掉 layui 自带 hover 效果：
hover: false要显式设，否则 hover 样式会盖掉你设的背景色 - CSS 权重不够：如果用了
skin: 'line'，默认 td 有透明背景，你的backgroundColor可能不生效，得在自定义 CSS 里加!important - 字段值类型不匹配：比如接口返回
"status": "1"（字符串），但代码里写row.status === 1（数字），永远不进分支
事情说清了就结束。真正难的不是写对函数，而是让颜色在分页、排序、搜索、状态更新之后，始终和业务数据对得上——所有逻辑必须围绕 row 数据本身展开，别碰 DOM 索引。
