Layui表格根据单元格内容动态改变字体颜色

先给你一个核心结论：在 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'（字符串与数字的类型差异）
• 状态字段如 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 可能被反复销毁与重建，内联样式容易丢失或出现错位

兼容性与性能提醒

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

性能方面无需担忧：Layui 内部对 cellStyle 函数做了缓存与节流处理，只要函数体内不执行耗时操作（如 AJAX 请求、复杂正则匹配），对千行级别的表格影响极小。

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