layui table 的 rowStyle 回调必须返回对象而非字符串，如 {style: 'background-color: #fafafa;'}；奇偶行用 params.index % 2 === 0 判断（index 从 0 开始）；推荐用 {class: 'xxx'} 配合 CSS 类控制样式，并设 even: false 避免冲突；reload 时需重新传入 rowStyle 才生效。
layui table 的 rowStyle 回调必须返回对象
直接在 table.render() 里加 rowstyle 就能控制每行样式，但很多人写成 return 'background: #f5f5f5' 或直接写 css 字符串，结果完全没效果——因为 rowstyle 要求返回的是一个键值对对象，不是字符串。
-
rowStyle是函数，接收params（含index、data等），必须 显式 return 一个对象 - 奇偶判断用
params.index % 2 === 0（注意：Layui 的index从 0 开始，第 1 行是偶数） - 返回对象里写
style字段，值为内联样式字符串，比如{style: 'background-color: #fafafa;'}
table.render({
elem: '#demo',
data: [...],
cols: [[{field:'name', title:'姓名'}]],
rowStyle: function(params){
if(params.index % 2 === 0){
return {style: 'background-color: #fafafa;'};
}
return {style: 'background-color: #fff;'};
}
});
用 CSS 类名替代内联样式更可控
靠 rowStyle 拼字符串容易漏分号、引号错位，而且没法复用或响应主题切换。Layui 其实支持给行加自定义 class，比硬塞 style 更稳。
- 在
rowStyle里返回{class: 'layui-table-odd'}这类 class 名，而不是style - 然后自己写 CSS，比如
.layui-table-odd { background-color: #f9f9f9 !important; } - 加
!important是因为 Layui 默认行内样式优先级高，不加可能被覆盖 - 如果表格启用了
even（隔行变色）配置，会和自定义冲突，务必关掉：even: false
遇到表格重载后样式丢失？检查是否漏了 done 回调重应用
用 table.reload() 刷新数据时，rowStyle 不会自动重跑——它只在初始渲染时执行一次。如果你依赖 JS 动态改背景（比如按状态标红），reload 后就失效了。
- 把样式逻辑抽成独立函数，比如
setRowBg(tr, data, index) - 在
done回调里遍历layui.$('.layui-table-body tbody tr')手动补一遍 - 或者更简单：在
reload时带上完整配置（包括rowStyle），让它重新走初始化流程 - 别信“reload 只刷新数据”，它其实会重建 DOM，但不会重触发
rowStyle——这是文档没说清的坑
移动端适配下奇偶色差难分辨？优先改明度别碰饱和度
在 iPad 或安卓低亮度屏上，#f5f5f5 和 #ffffff 几乎看不出区别，用户会以为没生效。
- 用 HSL 调整：保持
lightness差 5%～8%，比如hsl(0, 0%, 96%)vshsl(0, 0%, 92%) - 避免用灰色系 + 蓝/绿底色混搭，容易在 OLED 屏上发虚
- 真要兼容弱视用户，别只靠颜色区分，加个细边框或左 border 更可靠
奇偶行样式这事，看着简单，实际卡在返回值类型、reload 机制、CSS 优先级三处。最常被忽略的是：哪怕你写了 rowStyle，只要没在 reload 时显式传进去，它就彻底不工作。
