rowStyle 是 Layui 表格中唯一稳定生效的行样式设置方式,需在 table.render() 初始化时传入,每行渲染前自动执行,返回驼峰式 CSS 属性对象;合计行须用 CSS 覆盖,done 回调设样式易丢失且性能差。

rowStyle 是唯一稳定生效的方式
直接操作 DOM 加 class 或 style 在分页、排序、reload 后会丢失,rowStyle 是 Layui 官方支持且自动重执行的钩子,必须在 table.render() 初始化时传入。它每行渲染前调用一次,翻页或重载后自动再跑,不用手动干预。
返回值必须是对象,键用驼峰式 CSS 属性名(如 background 或 backgroundColor),值为字符串;返回空对象 {} 表示不加样式,不能返回 null 或 undefined。
- 字段名拼写必须和
cols中定义的field一致,比如列配置是{field: 'status'},就要读row.status - 务必校验字段是否存在:
row.status != null && row.status !== '',避免undefined导致判断失效 - 如果表格启用了
even: true(隔行变色),rowStyle会覆盖默认偶数行样式,需手动补全逻辑
如何精准匹配“某一行”而不是“某一类行”
所谓“某一行”,常见有两种理解:视觉上第几行(比如第 0 行、最后一行),或数据中某个唯一标识(比如 id === 123)。这两者处理方式不同,容易混淆。
- 用
index参数可匹配渲染序号(从 0 开始),适合标头、固定位置行,但注意:开启排序/搜索后,index不再对应原始数据下标 - 要按真实数据 ID 标记,得依赖
row.id字段(或你自定义的唯一字段),例如if (row.id === 123) { return {background: '#fff3cd'}; } - 如果原始数据没带 ID,又必须按原始顺序标记(比如第一笔数据),得在请求后给每条数据加一个临时字段,如
data.forEach((d, i) => d.__index = i),再在rowStyle里查row.__index === 0
合计行背景色不能靠 rowStyle 设置
totalRow 是独立结构,不走 rowStyle 流程,写 rowStyle 对它完全无效。它的 DOM 结构固定为 <tbody class="layui-table-total"><tr><td>合计</td></tr></tbody>,只能用 CSS 覆盖。
- 必须同时设置
.layui-table-total tr和.layui-table-total tr td,只设tr在部分浏览器下会被td背景色盖掉 - Layui 默认给
td写了白色背景,所以通常要加!important才能生效 - 不要用
:nth-child,合计行只有一个<tr>,且没有额外 class 可区分
示例:
.layui-table-total tr {
background-color: #1890ff !important;
}
.layui-table-total tr td {
background-color: #1890ff !important;
color: #fff !important;
font-weight: bold;
}
done 回调加样式有严重隐患
虽然 done 里能用 jQuery 找到 tr[data-index="x"] 并设 css(),但它只是“快照式”操作:一旦 reload、排序、分页,DOM 重建,样式立刻消失。
- 如果非要用
done,必须每次 reload 都重新传入完整配置(含done函数本身),否则不会重执行 - 启用
fixed列时,done里用$('tr').eq(i)会漏掉 fixed 区域的行,必须用obj.elem.next('.layui-table-box').find('.layui-table-body tbody tr')才能遍历全量真实行 - 对性能敏感的场景(如千行表格),
done里遍历 + DOM 操作比rowStyle开销大得多
真正需要动态刷新单行样式(比如操作后实时变色),应更新缓存数据并调用 table.updateCell(),触发该行重绘,从而再次进入 rowStyle 流程。


















