layui.progress在templet中不生效，因其需DOM渲染后手动初始化，而templet仅返回HTML字符串；正确做法是用内联CSS模拟进度条，或在table的done回调中批量调用element.progress。
为什么直接在 layui.table 的 templet 里用 layui.progress 不生效？
因为 layui.progress 是一个需要 dom 渲染后手动初始化的组件，而表格单元格（templet）返回的是纯 html 字符串，layui 不会自动对其中的进度条元素执行 layui.use('progress') 或 element.render('progress')。你看到的只是静态结构，没有样式和动画。
正确做法：用原生 HTML + CSS 模拟进度条，配合 templet 动态写入
放弃调用 layui.progress，改用语义清晰、零依赖的内联样式进度条。这样既轻量，又确保每次渲染都即时生效。
-
templet返回一个带内联样式的<div>容器 + 子<div>进度条，宽度由数据字段动态控制（如d.rate） - 必须设置父容器
height和overflow: hidden，否则子条可能撑开或溢出 - 推荐使用
background-color+border-radius模拟 Layui 默认蓝灰风格，例如#1E9FFF主色 - 若需显示百分比文字，可叠加绝对定位的
<span>，但注意避免文本被截断（加white-space: nowrap）
templet: function(d) {
const percent = Math.min(100, Math.max(0, d.rate || 0));
return `
<div style="width:100%; height:8px; background:#e6e6e6; border-radius:4px; overflow:hidden;">
<div style="width:${percent}%; height:100%; background:#1E9FFF; border-radius:4px;"></div>
<span style="position:absolute; font-size:12px; color:#666; white-space:nowrap;">${percent}%</span>
</div>
`;
}
如果坚持要用 layui.progress，必须手动触发渲染
仅适用于小规模表格（行数 ≤ 50），且需确保 element 模块已加载。关键点是：不能在 templet 中写组件调用，而要在表格渲染完成后的回调中批量处理。
- 在
done回调中遍历所有匹配进度条容器（例如加了class="js-progress"） - 对每个容器调用
element.progress('demo', d.rate + '%')，其中'demo'是任意唯一标识符（不影响显示） - 务必先清空原有内容再重绘，否则重复调用会残留旧 DOM
- 注意：该方式在分页/重载表格时需重新触发，容易漏掉；且
progress默认高度固定（20px），与紧凑表格不协调
兼容性与性能提醒
用原生 CSS 方案时，templet 返回的是静态字符串，渲染快、无 JS 开销；而 element.progress 每次都要创建新 DOM 并绑定事件（哪怕不用），在千行表格中会明显卡顿。
另外，移动端要注意 height 值别设太小（如 4px），iOS Safari 对极细线条渲染不稳定，建议不低于 6px。还有，别忘了给进度条容器加 vertical-align: middle，否则和文字行高对不齐。
