Layui表格需用templet函数动态生成带内联样式的进度文字span，根据d.progress值（需先归一化为数字）分段设颜色背景，返回含padding、border-radius等样式的HTML字符串，不可用lay-type="progress"。
用 layui.table.render 的 templet 自定义单元格内容
layui 表格不支持直接在列中渲染带样式的进度文字，必须靠 templet 函数返回 html 字符串。关键不是“加颜色”，而是“根据数值动态生成带内联样式的 <span></span>”。
常见错误是把样式写死，或漏掉转义导致 HTML 被当作文本显示。
- 必须返回字符串（不能直接操作 DOM）
-
templet接收的参数是当前行数据对象，比如d.progress表示该行进度值（0–100） - 避免在模板里写复杂逻辑，数值判断建议封装成小函数
根据百分比值决定文字颜色和背景色的判断逻辑
颜色不能只靠阈值硬编码，要兼顾可读性与业务含义。比如 0–60% 用红色系表示滞后，60–90% 黄色系表示进行中，90–100% 绿色系表示完成度高——但具体分界点得看你的业务规则。
注意：Layui 默认表格行高较紧凑，<span></span> 建议加 display: inline-block 和合适 padding，否则颜色块太窄难识别。
templet: function(d) {
let color, bg;
if (d.progress ' + d.progress + '%';
}
为什么不用 lay-type="progress"？
因为 lay-type="progress" 渲染的是原生 Layui 进度条组件，它只接受数值并画出条形图，**不支持在条内叠加带颜色的文字**，更无法让“65%”三个字本身变红或加粗。你看到的“文字+进度条”混合效果，其实是靠 templet 把文字和 <div class="layui-progress"> 拼在一起实现的——但那样会破坏表格对齐、增加高度、且移动端易错位。
<p>真实项目里，纯文字百分比 + 颜色标识比“进度条+文字”更轻量、更可控、加载更快。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro"><img
src="https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png" alt="深蓝色网站后台管理系统layui框架模板-AdminPro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="overflowclass">深蓝色网站后台管理系统layui框架模板-AdminPro</a>
<p class="overflowclass">一款深蓝色网站后台管理系统layui框架模板</p>
</div>
<a rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>进度条组件依赖 <code>layui.progress 模块，需额外 use
兼容性与性能提醒
所有颜色逻辑都在前端计算，1000 行表格也没压力——但别在 templet 里发请求、调接口或用 document.querySelector。Layui 表格重绘时会高频调用这个函数。
容易被忽略的一点：d.progress 可能是 null、undefined 或字符串 "--"，不加判断直接计算会出 NaN 或报错。务必先做类型归一化：
const val = Number(d.progress) || 0; // 再基于 val 做颜色判断
另外，如果后端返回的是小数（如 0.75），记得乘以 100 并 Math.round，避免显示 75.00000000000001% 这种诡异结果。
