可在templet函数中用内联style动态设进度条颜色：先归一化数值到0–100，再按区间返回对应background-color，如rate<60用#FF5722、60≤rate<85用#FFB800、≥85用#5FB878，并确保加lay-showPercent="true"显示百分比。
layui
table 的
里怎么动态控制进度条颜色
直接在列的
函数里返回带内联样式的
templettemplet
，别用 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
（绿）
别忘了给外层
加
lay-showPercent="true"
，否则百分比文字不显示
为什么不能用
cols
配置里的
style
直接设颜色
style
字段只作用于整个单元格的
，不是进度条内部的
。你设了
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()
做时间戳。
基于Layui自定义内容轮播插件
基于Layui自定义内容轮播插件是一款表格数据为ajax加载的本地json数据，本地查看会有跨域问题导致数据不能显示。
下载
颜色映射逻辑建议抽成纯函数，比如
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 `
`;
}
注意：示例里没加
${rate}%
是因为
lay-showPercent="true"
已自动处理；加了反而重复。
真正容易被忽略的是：当
d.score
是
null
、
undefined
或字符串
"--"
时，
Math.max(0, Math.min(100, d.score))
会得
NaN
，导致整个进度条不渲染。务必先做
|| 0
或
?? 0
守卫。
相关文章