可在templet函数中用内联style动态设进度条颜色：先归一化数值到0–100，再按区间返回对应background-color，如rate

layui table 的 templet 里怎么动态控制进度条颜色

直接在列的 templet 函数里返回带内联样式的 <div class="layui-progress">，别用 CSS 类名硬编码颜色。Layui 的进度条本身不绑定颜色逻辑，全靠你手动算。 <p>常见错误是写死 <code>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（绿）
• 别忘了给外层 <div class="layui-progress"> 加 <code>lay-showPercent="true"，否则百分比文字不显示

  为什么不能用 cols 配置里的 style 直接设颜色

  style 字段只作用于整个单元格的 <td>，不是进度条内部的 <code><div class="layui-progress-bar">。你设了 <code>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框架模板-AdminPro

  一款深蓝色网站后台管理系统layui框架模板

  下载
  • 颜色映射逻辑建议抽成纯函数，比如 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 
        <div class="layui-progress-bar" lay-percent="${rate}%" style="background-color: ${getColor(rate)}">
        </div>