Layui table如何设置不同行的字体颜色-Layui教程-PHP中文网

rowStyle 是设置整行文字颜色的唯一稳定机制，需在 table.render() 中直接传入，返回 {css: {color: ''}} 对象；skin: 'line' 或 'nob' 会使其失效，应设为 'default'；异步逻辑需前置，DOM 操作须用 done 回调并分区域处理。

rowStyle 回调是设置整行文字颜色的首选方式

必须在 table.render() 配置中直接传入 rowstyle 函数，它会在每行渲染前被调用，返回一个带 css 字段的对象 —— 这是唯一能稳定控制整行文字颜色的内置机制。

常见错误包括：写成 cellStyle（只影响单格）、把样式塞进 cols 里（只作用于列头或单元格）、或返回字符串如 'color: red;'（会被忽略）。

rowStyle 接收两个参数：row（当前行完整数据对象）和 index（从 0 开始的行号），别漏传
返回值必须是形如 {css: {color: '#e74c3c', background: '#fff9f9'}} 的对象，css 字段不可省略
若依赖异步判断（例如查接口后设色），rowStyle 不支持 await，状态必须提前准备好
示例：按订单状态设色

rowStyle: function(row, index) {
  if (row.status === 'failed') {
    return {css: {color: '#e74c3c'}};
  } else if (row.status === 'success') {
    return {css: {color: '#27ae60'}};
  }
  // 不返回即保持默认样式
}

skin: 'line' 或 skin: 'nob' 会让 rowStyle 失效

这是最常踩却最难排查的坑：当表格启用了 skin: 'line' 或 skin: 'nob' 时，Layui 会直接给 <tr> 元素写内联 <code>style 属性（比如 style="border-bottom: 1px solid #eee"），CSS 权重极高，会覆盖你通过 rowStyle 返回的 color。

确认没配 skin，或显式设为 skin: 'default'（默认值）
打开浏览器开发者工具，检查目标 <tr> 元素是否真的应用了你的 <code>color，还是被其他规则干掉了
如果用了自定义 class（如通过 className 配置），确保它没用 !important 锁死颜色

done 回调 + DOM 操作是兼容性兜底方案

当 rowStyle 受限（比如要读取 DOM 计算结果、或兼容 Layui 2.5.x 以下旧版本），就得用 done 回调手动操作 DOM。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

注意：不能直接遍历 .layui-table tbody tr，因为固定列（fixed: 'left'）和虚拟滚动会把 tbody 拆成多个独立 <table> 块，必须分别处理主表体和固定列区域。 <ul> <li>主表体：用 <code>layui.$('.layui-table-body tbody tr')

左固定列：用 layui.$('.layui-table-fixed-l tbody tr')
右固定列：用 layui.$('.layui-table-fixed-r tbody tr')
加 setTimeout(..., 10) 是必要的，避免 DOM 渲染未完成就操作（0ms 在低速设备上大概率失败）

done: function(res, curr, count) {
  setTimeout(() => {
    const data = res.data;
    layui.$('.layui-table-body tbody tr').each(function(i, tr) {
      if (data[i] && data[i].status === 'pending') {
        layui.$(tr).css('color', '#e67e22');
      }
    });
  }, 10);
}

用 templet 控制单列文字颜色更轻量

如果只需改某几列的文字颜色（而非整行），templet 是更干净的选择 —— 它在单元格渲染时执行，可直接返回带样式的 HTML 字符串。

但要注意：它只影响该列内容，无法改变整行其他列的颜色；且若列启用了排序、筛选等交互，需自行保证逻辑一致性。

写法示例：templet: d => d.status === 'failed' ? '<span style="color:#e74c3c">失败</span>' : '成功'
不要滥用 <a></a> 标签来“骗”颜色，容易破坏语义和可访问性
若需复用样式，建议抽成 CSS 类，再用 class 属性绑定

实际项目里，rowStyle 和 templet 往往配合使用：前者控整行基础色，后者微调关键列的视觉强调。真正难的是状态前置计算和多皮肤兼容，这两点不提前想清楚，后面调样式会反复掉坑。