先给你一个核心结论：在 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，务必先进行存在性判断。
