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"> 默认都是蓝色，没有内置的「按数值分段着色」机制。
<ul>
<li>
<code>lay-percent 只是把数字转成 width: X%，不触发任何颜色计算
.layui-progress-bar），无 data 属性或 class 动态注入点templet 手动拼 HTMLtemplet 中怎么写带颜色判断的进度条
核心是在列定义里写一个返回字符串的函数，用 if/else 或三元判断百分比区间，拼出带 style 或自定义 class 的 <div>。
<pre class="brush:php;toolbar:false;">{
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>';
}
}</pre>
<ul>
<li>务必用 <code>style="background-color: ..."，不要依赖 class —— Layui 的 .layui-progress-bar 有 !important 覆盖，加 class 很难生效
>），避免模板解析失败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，所以颜色逻辑必须是纯函数、无副作用，别在里面调接口或改全局状态。
