Layui表格如何设置不同的隔行背景色-Layui教程-PHP中文网

rowStyle必须写为返回样式对象的函数，如rowStyle: function(row, index){return {background: index%2?'#fff':'#f5f7fa'};}，否则无效。

layui table 的 `rowStyle` 回调怎么写才生效

直接改 css 伪类（如 tr:nth-child(even)）在 layui 表格里大概率无效，因为 layui 渲染后会动态插入 tbody 和带内联样式的 tr，优先级更高。必须用官方支持的 rowstyle 配置项——它在每一行渲染时执行，返回对象覆盖默认样式。

常见错误是把它当普通 CSS 写成字符串，比如 rowStyle: 'background-color: #f9f9f9;'，这完全不生效。它必须是函数，且返回一个键值对对象：

table.render({
  elem: '#demo',
  // ...
  rowStyle: function(row, index) {
    if (index % 2 === 0) {
      return { background: '#f8f9fa' }; // 偶数行（第0、2、4...行）
    } else {
      return { background: '#ffffff' }; // 奇数行
    }
  }
});

row 是当前行原始数据对象，index 是从 0 开始的行序号（不是页码或 ID）
返回对象里的属性名要符合 CSS 样式命名规则，比如 background 可以，backgroundColor 也可以，但别写成 background-color（驼峰或短横线都行，Layui 内部会处理）
如果返回 null 或空对象 {}，该行将沿用默认背景色

为什么用 `rowStyle` 而不用 `skin` 或 CSS 类

Layui 的 skin: 'line' 或 'nob' 只控制边框和紧凑度，不提供背景色定制；而手动加 class 到 tr 上再写 CSS，容易被 Layui 的内联 style 覆盖，尤其开启 even（隔行变色）时，它自己会加 layui-table-even 类，但颜色固定为浅灰，无法通过外部 CSS 轻松覆盖。

真正可控的方式只有 rowStyle，原因有三：

它在 DOM 渲染前注入样式，优先级高于所有外部 CSS
可结合数据逻辑动态设色，比如状态为 "error" 的行标红：if (row.status === 'error') return { background: '#ffebee' };
不影响表格性能——只在初始化和重载时执行，不监听滚动或 hover

`rowStyle` 在分页/重载后还生效吗

生效，但要注意：每次调用 table.reload() 时，必须显式传入完整的配置对象，包括 rowStyle。很多人只传 where 或 page，漏掉 rowStyle，导致重载后恢复默认隔行色。

正确做法是把 rowStyle 提取为变量或函数引用：

const myRowStyle = function(row, index) {
  return { background: index % 2 ? '#fff' : '#f5f7fa' };
};

table.render({
  elem: '#demo',
  rowStyle: myRowStyle,
  // ...
});

// 重载时
table.reload('demo', {
  where: { type: 'user' },
  rowStyle: myRowStyle // 必须带上！
});