Layui table如何实现根据数值大小显示不同的进度条颜色-Layui教程-PHP中文网

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 <div class="layui-progress-bar" style="width:' + percent + '%;background-color:' + color + '"></div>';
}

`layui-progress` 的样式覆盖必须用内联 `style`，不能靠 class

Layui 的进度条默认用 .layui-progress-bar 类控制背景色，但这个类的 CSS 是写死的（background-color: #1E9FFF），且没有提供 API 动态改 class。如果你试图用 addClass 或切换 class 名，会被全局样式强制覆盖。

唯一能绕过的方式是直接在 <div class="layui-progress-bar"> 上写 <code>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%" → 浏览器报错或渲染异常。

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

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

下载

移动端适配下进度条高度太矮？改 `line-height` 不管用

默认进度条在手机上看着扁，很多人试过调 height 或 line-height，但无效——因为 Layui 把 .layui-progress-bar 设成了 display: inline-block，且父容器 .layui-progress 有固定 height: 4px。

真正生效的改法只有两个：