最直接的方式是用templet拼内联样式,Layui原生支持在列配置中通过templet返回带style的HTML字符串,适合状态码映射颜色等明确的“值→样式”关系。
用 templet 拼内联样式最直接
不需要额外插件或魔改,layui 原生就支持在列配置里用 templet 返回带 style 的 html 字符串。这是最稳、最易调试的方式,尤其适合状态码映射颜色这种明确的“值→样式”关系。
- 状态码是字符串(如
"success"、"error"、"pending")时,直接用if或三元判断,拼出style="color: #5FB878;"这样的内联样式 - 别漏写原始字段内容,比如
return '<span style="color:#FF5722;">' + d.status + '</span>';,否则单元格会空白 - 如果状态码有 5 种以上,建议提前定义映射对象:
const statusColor = {success: '#5FB878', error: '#FF5722', pending: '#F7BA1E', disabled: '#999', unknown: '#666'};,再用statusColor[d.status] || '#999'取值 - 注意引号转义:模板里用单引号包裹整个字符串,内部样式用双引号,避免渲染失败
cellStyle 回调只认对象,不认 class 名
有人搜 “layui cellStyle 颜色” 会误以为能传 class 名,但实际 cellStyle 参数必须返回一个纯对象,比如 {color: '#19be6b'},传字符串或 class 名(如 'text-success')完全无效。
- 回调参数是
params,关键字段是params.row(整行数据)和params.field(当前列字段名),不要依赖params.value——它可能被格式化过 - 状态码若为字符串数字(如
"1"、"0"),用Number(params.row.status)转换比parseInt更安全,对空字符串返回0,对null返回0,对undefined返回NaN - 必须显式处理
isNaN(),否则NaN === 'error'是false,样式直接 fallback 到默认色,容易误判为“没生效”
整行变色必须配 skin="row" + done 回调
如果需求是“状态为 error 时整行背景变红”,不能只靠 templet 或 cellStyle,因为它们只作用于单格。此时必须启用 skin="row",并在 done 回调里操作 DOM。
-
skin="row"是前提:它让每行<tr> 自动带上 <code>layui-table-row类,避免手动加 class 被 layui 内部样式覆盖 -
done回调里用table.cache[tableId]拿原始数据,别用$(tr).find('td').eq(0).text()取值——文本可能被截断或加了单位 - 性能敏感时,可对比上次
res.count和当前长度,只遍历新增行,避免每次重刷全表 - 在
templet里调用未全局声明的函数(如getColor(d.status)),Layui 渲染时找不到上下文,直接报错或空白 - 用 jQuery 在
render前操作 DOM,结果表格重绘(分页/搜索)后样式丢失 - 信了网上“
cellStyle支持 class”的说法,传了字符串进去,结果样式根本不出 - 后端返回的状态码带空格或大小写混用(如
"Success"),前端没做.trim().toLowerCase()就直接匹配,导致颜色不触发
别踩这些坑
真实项目里高频翻车点就这几个:
templet,最干净的是 cellStyle,最灵活的是 done + skin="row";选哪个,取决于你要染的是字、是格,还是整行。











