layui 进度条背景色只能通过内联 style="background-color: #ff5722 !important" 覆盖,且必须作用于 layui-progress-bar 元素;table templet 中需先 parsefloat 并截断为 0–100 范围再设色。

layui-progress-bar 的 background-color 必须用内联 style 覆盖
Layui 的 layui-progress-bar 元素背景色由 CSS 类硬编码为 #1E9FFF,且无 API 支持动态改色。你不能靠加 class(如 layui-bg-red)或修改 CSS 变量生效——所有外部 class 都会被全局样式强制覆盖。
唯一稳定方式是直接在元素上写 style="background-color: #FF5722 !important"。注意三点:
-
!important不可省:Layui 2.8.18 等版本会 JS 动态重设background-color,不加!important就会被覆盖 - 必须作用于
<div class="layui-progress-bar"> 这一层,不是外层 <code>layui-progress - 别用
barColor参数——layui.progress模块根本不认这个字段 - 转数字:
let val = parseFloat(d.score) || 0 - 截断到 0–100:
val = Math.max(0, Math.min(100, val))
table templet 中动态颜色要先归一化数值
在 templet 函数里拼进度条时,后端返回的 d.score 常是字符串、null 或超范围值(如 "85.5"、undefined、120),直接拼进 width 会导致渲染异常甚至报错。
必须做两步处理:
再结合判断逻辑设色,例如:
templet: function(d) {
let val = parseFloat(d.score) || 0;
val = Math.max(0, Math.min(100, val));
let color = '#5FB878';
if (val <div class="layui-progress-bar" style="width:' + val + '%;background-color:' + color + ' !important"></div>











