Layui table 进度条颜色需通过 templet 自定义列实现动态变化，因 lay-percent 仅控制宽度且 .layui-progress-bar 默认蓝色无分段着色机制；templet 中应使用内联 style 设置 background-color，并做空值保护与数值区间判断。
layui table 进度条颜色如何随 percent 值动态变化
直接结论：layui 原生 table 不支持进度条颜色绑定百分比逻辑，必须用 templet 自定义列内容，并在模板里根据数值判断颜色类名或内联样式。
为什么不能直接用 lay-percent 或 CSS 类控制颜色
Layui 的 lay-percent 仅控制宽度，不提供颜色映射能力；所有渲染出的 <div class="layui-progress-bar"> 默认都是蓝色，没有内置的「按数值分段着色」机制。
-
lay-percent只是把数字转成width: X%，不触发任何颜色计算 - 所有进度条共用同一套 CSS（
.layui-progress-bar），无 data 属性或 class 动态注入点 - 表格列配置中无法传入“颜色计算函数”，只能靠
templet手动拼 HTML
templet 中怎么写带颜色判断的进度条
核心是在列定义里写一个返回字符串的函数，用 if/else 或三元判断百分比区间，拼出带 style 或自定义 class 的 <div>。
{
field: 'rate',
title: '完成度',
width: 180,
templet: function(d) {
var percent = d.rate || 0;
var color = '#1E9FFF'; // 默认蓝
if (percent >= 90) color = '#5FB878'; // 绿
else if (percent >= 60) color = '#FFB800'; // 黄
else if (percent > 0) color = '#FF5722'; // 橙
else color = '#999'; // 0% 灰
return '<div class="layui-progress">' +
'<div class="layui-progress-bar" style="width: ' + percent + '%; background-color: ' + color + ';"></div>' +
'</div>';
}
}
- 务必用
style="background-color: ..."，不要依赖 class —— Layui 的.layui-progress-bar有 !important 覆盖，加 class 很难生效 - 注意转义 HTML 特殊字符（如
>），避免模板解析失败 - 百分比值需做空值保护（
d.rate || 0），否则undefined会导致NaN%宽度异常
有没有更简洁的写法？比如用 CSS 变量或 data 属性
可以，但需额外加 JS 初始化逻辑。Layui 渲染完表格后，用 table.on('rendered', ...) 遍历进度条并设置 data-percent，再用 CSS attribute selector 控制颜色 —— 实际反而更重，且不支持 IE。
- 纯 CSS 方案需要每个区间写一条规则，例如：
[data-percent~="90"] .layui-progress-bar { background: #5FB878; } - 但
data-percent是字符串，无法做数值比较，只能匹配离散值，不实用 - 最终仍要 JS 计算并 setAttribute，不如直接 inline style 干净
真正容易被忽略的是：Layui 表格在 reload 或排序后会重新执行 templet，所以颜色逻辑必须是纯函数、无副作用，别在里面调接口或改全局状态。
