正确做法是在templet中输出带data属性的容器，如<div class="progress-box" data-percent="65" data-color="#5FB878"></div>，再于done回调中遍历并调用layui.progress(elem[0], {percent, barColor, text})初始化。
layui table 的 templet 里怎么渲染 layui.progress
不能直接在 templet 字符串里写 layui.progress() 调用——它不是纯 html 渲染函数，需要 dom 挂载和模块初始化。表格单元格是字符串模板阶段生成的，此时 layui.progress 还没执行，也没对应 dom 元素可绑定。
正确做法是：用 templet 输出一个带唯一标识（如 data-progress-id）的容器，再在 done 回调里遍历这些容器、逐个调用 layui.progress。
- 必须等表格渲染完成才操作进度条，所以一定要放在
done回调里，不能放render后或templet内部 -
templet返回的 HTML 必须包含可被 JS 定位的元素，比如<div class="progress-box" data-value="65"></div> - 避免用
id，因为表格可能有分页/重载，重复id会出问题；优先用data-*属性传参
templet 怎么写才能兼容进度条参数传递
进度条需要值（percent）、颜色（barColor）、文字（text）等，这些不能硬编码，得从当前行数据动态取。Layui 表格 templet 支持函数形式，参数是 d（当前行数据对象），返回字符串即可。
- 推荐用
templet: function(d) { return '<div class="layui-progress" data-percent="' + d.rate + '" data-color="' + (d.status === 'high' ? '#5FB878' : '#FFB800') + '"></div>'; } - 不要在模板里写
style或内联onclick，保持语义清晰，样式和行为都留到done统一处理 - 如果某行没有进度值（如
d.rate是null或undefined），建议 fallback 到0，否则layui.progress可能报错或不渲染
done 回调里怎么安全调用 layui.progress
done 是表格完成渲染后触发的钩子，此时所有单元格 DOM 已就位，可以放心查询和初始化组件。
- 先用
layui.$（或原生document.querySelectorAll）找所有带data-percent的进度容器，例如：layui.$('.progress-box[data-percent]') - 遍历每个元素，读取
data-percent和data-color，再调用layui.progress：layui.progress(elem, { percent: value, barColor: color, text: value + '%' }) - 注意：
layui.progress的第一个参数必须是 DOM 元素（不是 jQuery 对象），所以要用elem[0]或elem.get(0) - 如果表格启用了分页或重载（
reload），done会多次触发，每次都要重新查、重新 init，无需手动销毁旧实例
为什么用 layui.progress 而不用纯 CSS 实现
纯 CSS 进度条更轻量，但 layui.progress 提供了三件事：动态更新支持、内置文字对齐、主题色自动适配（比如暗色模式下文字反色）。如果你只需要静态展示且不涉及后续修改，CSS 确实更快更稳。
- 用
layui.progress的真实理由通常是：后续要响应式更新某行进度（比如轮询刷新），而它提供了layui.progress.update()方法 - 但如果只是初始化一次，且项目已引入 Layui，用它省去样式维护成本；若没引入 Layui 或追求极致性能，用 2 行 CSS + 内联
width更直接 - 容易忽略的一点：
layui.progress默认会在容器内插入两个<span>，如果单元格高度受限（比如设置了line-height: 1），文字可能被截断，需额外加white-space: nowrap; overflow: visible;
layui.progress。 
