templet 是唯一可靠入口，因 Layui table 的 progress 不支持动态 barColor，需通过 templet 手动拼 HTML 并注意数值类型转换与移动端高度适配。
进度条颜色依赖数值时，templet 是唯一可靠入口
layui 的 table 组件不支持直接给 progress 设置动态 barcolor，必须通过列的 templet 自定义渲染。官方文档里没明说这点，但实测发现：哪怕你把 progress 的 options 写死在 column 配置里，layui 也只读一次初始值，不会随 data 动态更新颜色。
所以得手动拼 HTML，用 laytpl 语法或纯字符串模板。推荐后者——更可控、无额外依赖：
templet: function(d) {
let percent = d.score || 0;
let color = '#5FB878'; // 默认绿色
if (percent < 60) color = '#FF5722';
else if (percent < 80) color = '#FFB800';
// 注意：Layui 进度条实际生效的是 background-color，不是 barColor
return '<div class="layui-progress"><div class="layui-progress-bar" style="width:' + percent + '%;background-color:' + color + '"></div></div>';
}
layui-progress 的样式覆盖必须用内联 style，不能靠 class
Layui 的进度条默认用 .layui-progress-bar 类控制背景色，但这个类的 CSS 是写死的（background-color: #1E9FFF），且没有提供 API 动态改 class。如果你试图用 addClass 或切换 class 名，会被全局样式强制覆盖。
唯一能绕过的方式是直接在 <div class="layui-progress-bar"> 上写 style="background-color: ..."。别省略 !important —— 实测某些版本（如 v2.8.18）即使内联也会被重置，加了才稳：
- 错误写法：
class="layui-progress-bar my-red"+ CSS 定义.my-red { background-color: red !important }→ 失效 - 正确写法：
style="background-color: #FF5722 !important"
数值边界判断要防空值和越界，否则进度条炸开
用户数据经常有 null、undefined、负数或超过 100 的值。Layui 的 layui-progress-bar 对 width 值很敏感：如果传入 120%，它会撑出容器；传入 -10% 则直接不显示。
templet 里必须做归一化处理：
- 先取值：
let val = d.rate != null ? parseFloat(d.rate) : 0 - 再截断：
val = Math.max(0, Math.min(100, val)) - 最后映射颜色：避免
if (val > 100)这种逻辑漏掉小数或字符串情况
尤其注意后端返回字符串 "85.5"，不转 parseFloat 就会拼成 width:"85.5%" → 浏览器报错或渲染异常。
移动端适配下进度条高度太矮？改 line-height 不管用
默认进度条在手机上看着扁，很多人试过调 height 或 line-height，但无效——因为 Layui 把 .layui-progress-bar 设成了 display: inline-block，且父容器 .layui-progress 有固定 height: 4px。
真正生效的改法只有两个：
- 覆盖
.layui-progress的 height：style="height: 8px !important"（加在最外层 div） - 同步调
.layui-progress-bar的height: 100%，否则条会居中溢出
别碰 font-size 或 padding，那只会让文字错位，不影响进度条本身。
颜色映射逻辑本身不复杂，难的是和 Layui 内部样式机制的对抗。每次升级 Layui 版本前，务必重测进度条 height 和 background-color 是否被新 CSS 覆盖。
