可在templet函数中用内联style动态设进度条颜色：先归一化数值到0–100，再按区间返回对应background-color，如rate<60用#FF5722、60≤rate<85用#FFB800、≥85用#5FB878，并确保加lay-showPercent="true"显示百分比。
layui table 的 templet 里怎么动态控制进度条颜色
直接在列的 templet 函数里返回带内联样式的 <div class="layui-progress">，别用 CSS 类名硬编码颜色。Layui 的进度条本身不绑定颜色逻辑，全靠你手动算。
常见错误是写死 style="background-color: #5FB878"，结果所有进度条一个绿；或者试图用 data-color 属性指望 Layui 自动读取——它根本不会读。
- 用
Math.min和Math.max把数值归一到 0–100 范围，避免进度条溢出或显示为 0% - 根据数值分段返回不同
background-color：比如 0–60% 用#FF5722（橙），60–85% 用#FFB800（黄），85–100% 用#5FB878（绿） - 别忘了给外层
<div class="layui-progress">加lay-showPercent="true"，否则百分比文字不显示
为什么不能用 cols 配置里的 style 直接设颜色
style 字段只作用于整个单元格的 <td>，不是进度条内部的 <div class="layui-progress-bar">。你设了 style: "color: red"，只会让文字变红，进度条纹丝不动。
更隐蔽的坑是：有人把颜色逻辑写在 done 回调里，用 $(...).find(".layui-progress-bar") 去遍历修改——这会触发重绘、卡顿，且表格重载（如分页、搜索）后失效。
- 必须在
templet函数中一次性生成带正确样式的 HTML 字符串 - 如果数值来自后端字段
rate，就用d.rate；别错写成d.RATE或d["rate"]（虽然后者语法对，但可读性差易出错） - Layui 2.8+ 支持在
templet中用箭头函数，但别滥用：templet: d => {...}里不能用this，需确保上下文干净
兼容性与性能要注意的三个点
小数据量时看不出区别，但表格超过 500 行，templet 里频繁字符串拼接 + 颜色判断就会拖慢渲染。别在里头调接口、查 DOM、或用 new Date() 做时间戳。
- 颜色映射逻辑建议抽成纯函数，比如
getColorByRate(rate)，避免重复 if-else - 移动端 Safari 下，
linear-gradient在进度条上可能渲染异常，所以老老实实用background-color单色，别折腾渐变 - Layui 默认进度条高度是
4px，如果改了 CSS 的.layui-progress-bar高度，要同步调整line-height和font-size，否则百分比文字会偏位
一个能直接粘贴的 templet 示例
假设后端返回字段叫 score，范围是 0–100：
templet: function(d) {
const rate = Math.max(0, Math.min(100, d.score || 0));
const getColor = r => r < 60 ? '#FF5722' : r < 85 ? '#FFB800' : '#5FB878';
return `
<div class="layui-progress" lay-showPercent="true">
<div class="layui-progress-bar" lay-percent="${rate}%"
style="background-color: ${getColor(rate)}">
</div>
</div>
`;
}
注意：示例里没加 <span>${rate}%</span> 是因为 lay-showPercent="true" 已自动处理；加了反而重复。
真正容易被忽略的是：当 d.score 是 null、undefined 或字符串 "--" 时，Math.max(0, Math.min(100, d.score)) 会得 NaN，导致整个进度条不渲染。务必先做 || 0 或 ?? 0 守卫。
