Layui table根据单元格内容动态设置文字颜色

在 layui 表格中实现条件变色功能，cellStyle 是最稳定的入口。该方式在渲染阶段动态计算，随数据同步刷新，不会像 DOM 操作那样容易失效——表格组件拥有内部逻辑，不宜通过 $(...).css() 干扰。掌握三个要点即可：接收 params 参数、返回合法的 CSS 对象、提前进行空值校验（避免 NaN 或条件误判），基本不会出现问题。

cellStyle 直接返回样式对象最为可靠

layui 的 table.render() 通过列配置中的 cellStyle 函数动态控制单元格样式，这是唯一能稳定响应数据变化且不破坏表格内部渲染逻辑的方式。不建议在 templet 中使用 style="color:red"——这样会丢失 hover、选中等内置样式，并可能被 layui 后续重绘覆盖。

操作要点：

• cellStyle 函数接收一个参数 params，其中 params.data 为当前行完整数据，params.field 为当前列字段名，params.value 为当前单元格原始值
• 必须返回一个对象，例如 {color: '#f00', 'font-weight': 'bold'}；返回 null 或空对象则不应用额外样式
• 不要在函数中操作 DOM（如 $(...).css()），因为 layui 渲染时尚未生成真实节点，且违背响应式设计原则

常见颜色判断场景的写法

根据数值大小、状态码、字符串关键词变色，本质上是条件分支。需注意避免隐式类型转换陷阱：

• 数值比较使用 params.value > 100，不要写 params.value == '100'（字符串 vs 数字）
• 状态字段如 status: 1 对应“启用”，建议统一使用枚举常量或 Map 映射，避免散落多处硬编码
• 示例：给金额列标红（负数）、标绿（正数）

cellStyle: function(params){
  if (params.field === 'amount') {
    if (params.value < 0) return {color: '#e74c3c'};
    if (params.value > 0) return {color: '#27ae60'};
  }
}

为什么不推荐使用 templet + 内联 style？

表面上看 templet 可以自由拼接 HTML，但实际会引发三类问题：

• 文字颜色会被 layui 默认的 .layui-table-cell 的 color: #333 层叠覆盖，除非添加 !important（不推荐）
• 单元格内 padding、line-height 等样式与 layui 主题不一致，尤其在 dark 模式下颜色对比度失效
• 开启 scrollBar 或使用虚拟滚动时，templet 返回的 DOM 可能被反复销毁重建，内联 style 容易丢失或错位

兼容性与性能提醒

cellStyle 是 layui 2.8+ 原生支持的 API，低于此版本需升级或改用 done 回调配合 table.cache 手动遍历 DOM——但这种方式无法响应排序、分页后的重绘，容易遗漏样式。

性能方面无需担心：layui 内部对 cellStyle 函数进行了缓存和节流，只要函数体不执行耗时操作（如 AJAX、复杂正则），对千行表格影响极小。

真正容易被忽略的是：当字段值为 null 或 undefined 时，params.value 即为 undefined，直接参与比较会产生 NaN 或 false，务必先进行存在性判断。