应通过 cellStyle 或 rowStyle 配置项动态设置样式：cellStyle 用于单单元格（如根据 status 设背景色），rowStyle 用于整行（如金额超 10000 时高亮），二者均在渲染时执行且 reload 后仍生效，避免直接操作 DOM。
表格渲染后怎么用 JavaScript 修改特定单元格背景色
不能直接操作 layui.table 渲染出的 dom 单元格并期望它不被重绘覆盖——因为 layui 表格在分页、排序、重载时会重新生成 td 元素。必须通过 cellstyle 或 cols 配置项动态计算样式，而不是事后用 document.queryselector 去改。
真实场景中，你通常需要根据某列值（比如状态码、金额、时间差）决定背景色。这时候应该把逻辑写进 cellStyle 回调里：
table.render({
elem: '#demo',
url: '/api/list',
cols: [[
{field: 'status', title: '状态', cellStyle: function(row) {
if (row.status === 'error') return 'background-color: #ffebee;';
if (row.status === 'success') return 'background-color: #e8f5e9;';
return '';
}}
]]
});
-
cellStyle是每个单元格渲染时执行的函数，row是当前行完整数据对象 - 返回字符串必须是合法 CSS 内联样式（注意末尾分号）
- 不要在里面调用
layui.$或操作 DOM，这不会持久生效 - 如果要同时控制文字颜色，可以返回
'background-color: #fff; color: #666;'
想按条件高亮整行而不是单个单元格怎么办
用 rowStyle 更合适，它作用于整行 tr，且优先级高于 cellStyle。但要注意：Layui 的 rowStyle 不是所有版本都支持（2.8+ 稳定支持），低于此版本需手动 patch 或退回到 done 回调中加类。
推荐写法（Layui ≥ 2.8）：
table.render({
elem: '#demo',
url: '/api/list',
rowStyle: function(row) {
if (row.amount > 10000) {
return 'background-color: #fff3cd;'; // 浅黄底
}
},
cols: [[
{field: 'amount', title: '金额'}
]]
});
-
rowStyle返回的样式会加到tr的style属性上，影响整行所有单元格 - 若同时用了
cellStyle和rowStyle，后者会“盖住”前者对背景色的设置 - 旧版 Layui（如 2.5.x）没有
rowStyle，只能在done回调里遍历tr手动加 class，但分页后需重新执行
修改后表格重载（reload）导致样式丢失怎么解决
根本原因是：reload 会触发整表重渲染，所有靠 done 或外部 JS 注入的样式都会清空。唯一可靠的方式是把样式逻辑固化进配置项本身，而非依赖副作用。
- 确保
cellStyle或rowStyle函数定义在render调用前，且不依赖闭包外的易变变量 - 避免在
cellStyle中读取全局数组或异步结果——它同步执行，拿不到 Promise 结果 - 如果颜色规则来自接口（比如配色方案存后台），得先请求完再调用
table.render，把函数闭包进去 - 别用
table.on('tool(...)里去改样式——那是响应点击，不是驱动渲染
CSS 类名方式比内联样式更可控吗
可以，但 Layui 不提供直接绑定 class 的 API。你得用 cellStyle 返回空字符串，再靠 templet 或 skin 配合自定义 class：
{field: 'type', title: '类型', templet: function(d) {
var cls = d.type === 'vip' ? 'bg-vip' : 'bg-normal';
return '<div class="' + cls + '">' + d.type + '</div>';
}}
然后在 CSS 里定义：
.bg-vip { background-color: #e3f2fd !important; }
.bg-normal { background-color: #f5f5f5 !important; }
- 加
!important是因为 Layui 默认给td设了背景色，不强制会被覆盖 -
templet适合复杂样式或带图标的情况，但性能略低于cellStyle - 如果只是纯背景色切换，
cellStyle更轻量；如果还要控制圆角、边框、padding，用templet+ class 更清晰
最常被忽略的一点：Layui 表格的 cellStyle 和 rowStyle 只在初始化或 reload 时执行，它们不是响应式监听器——数据变了但没触发重载，样式就不会更新。真要响应式，得自己封装一个 watch 逻辑，或者用 Vue/React 替代 Layui。
