在 layui table 的 templet 函数中，根据数值动态设置进度条颜色：先校验并转为有效数字，再用 if-else 或数组 find 匹配阈值返回带内联样式的 <div>，确保兼容性与性能。
layui table 中 templet 里怎么动态设置进度条颜色
直接在列的 templet 函数中根据数值返回带内联样式的 <div> 即可，不用额外监听或重绘。layui 渲染表格时会自动执行这个函数，每次生成单元格都实时计算。
常见错误是试图用 jQuery 在 done 回调里统一找元素改色——既慢又容易漏掉分页/搜索后的新数据，还可能因 DOM 未就绪而失效。
-
templet必须是函数，不能写成字符串模板（否则无法做逻辑判断） - 百分比值建议先校验是否为有效数字，避免
NaN导致样式错乱 - 颜色映射建议用 if-else 分段，比 CSS 变量 + JS 计算更稳（Layui 2.8 以下不支持 CSS 变量注入）
{
field: 'progress',
title: '进度',
templet: function(d) {
var val = parseFloat(d.progress);
if (isNaN(val)) val = 0;
var color = '#1E9FFF';
if (val >= 80) color = '#5FB878';
else if (val >= 50) color = '#FFB800';
else if (val < 30) color = '#FF5722';
return '<div class="layui-progress">' +
'<div class="layui-progress-bar" lay-percent="' + val + '%"' +
'style="width:' + val + '%; background-color:' + color + '"></div>' +
'</div>';
}
}
为什么不能只靠 lay-percent 属性加 CSS 类控制颜色
Layui 的 layui-progress 组件本身不提供「按数值切换类」的能力，lay-percent 只控制宽度，不触发 class 更新。强行绑定 class 到外层容器（比如 layui-progress success）会导致整列颜色一致，失去“每行独立配色”的意义。
真实场景中，同一列可能同时存在 20% 的红色、75% 的黄色、95% 的绿色，必须逐单元格计算。
- 试图用
data-属性存值再用 CSS attr() 控制颜色？CSS 不支持动态颜色计算 - 用
layui.use('element')主动渲染进度条？多余，templet返回的 HTML 已是完整结构，无需二次初始化 - 把颜色逻辑抽到外部函数？可以，但注意闭包变量别污染全局，且函数需能接收
d参数
兼容性与性能要注意的点
表格数据量大（如 > 500 行）时，templet 频繁拼接字符串可能轻微卡顿。此时可提前编译模板函数，或用 document.createElement 替代字符串拼接（但收益有限，一般无需优化）。
- Layui 2.5.6+ 支持在
templet中直接 return DOM 对象，但需确保返回的是单个节点（不是 NodeList） - IE11 下注意
parseFloat对空字符串返回NaN，务必判空 - 移动端 Safari 对内联 style 的解析更严格，避免在 color 值里加空格或单位（如写
#ff0000或rgb(255,0,0)px）
如果要用渐变色或更多阈值怎么办
硬编码 if-else 到 5 段以上就难维护了。建议把阈值和颜色定义成数组，用 find 匹配：
const COLOR_RANGES = [
{ max: 30, color: '#FF5722' },
{ max: 50, color: '#FFB800' },
{ max: 80, color: '#1E9FFF' },
{ max: 100, color: '#5FB878' }
];
// ... 在 templet 函数内：
const rule = COLOR_RANGES.find(r => val <= r.max) || COLOR_RANGES[0];
const color = rule.color;
这样新增一个 90% → 紫色的规则，只需往数组加一项，不用改逻辑。不过注意：数组顺序必须从小到大，否则 find 会匹配第一个满足条件的项。
真正麻烦的是需要响应式颜色（比如从红平滑过渡到绿），那就得换方案——用 canvas 绘制或引入 tiny-gradient 库，但这就超出 Layui 原生能力范围了。
