layui的element.progress()需手动同步三步:先设lay-percent属性,再调element.init(),最后执行progress();lay-showPercent需设为非空字符串才显示数字;表格中应避免直接使用,多文件上传须为每个进度条分配唯一lay-filter。

layui 的 element.progress() 不能单靠调用就更新百分比数字,因为它的设计只改进度条宽度(width 样式),不自动同步 lay-percent 属性,也不重绘文本节点。你看到的数字卡在初始值,不是 bug,而是机制如此——必须手动让 layui「重新认一遍新值」。
必须同步执行三步操作
缺一不可,顺序也不能错:
- 用
$().attr('lay-percent', '75%')把新百分比写入 DOM 的lay-percent属性(注意:必须是字符串,如'75%'或'3/4') - 立即调用
element.init(),强制 layui 重新扫描并解析所有lay-*属性(包括lay-showPercent和刚写入的lay-percent) - 再执行
element.progress('yourFilter', '75%'),触发动画和样式更新
lay-showPercent 属性要设对才能显示数字
这个属性控制文字是否渲染,但它判断“真值”的方式很宽松:
- 设成
yes、true、1或任意非空字符串(如"on")都可启用文字 - 设成
false或no会彻底禁用,且element.init()也救不回来 - 完全不写这个属性 = 默认不显示文字,哪怕你后面调
element.progress也没用
表格单元格里别用 element.progress 初始化
在 table.render 的 templet 中直接写 element.progress() 基本无效,原因有两个:
- 表格渲染是字符串插入,
element.render('progress')不会自动触发 - 分页或排序后 DOM 重建,之前绑定的定时器、事件、JS 状态全丢失
推荐做法:用原生 HTML 结构 <div class="layui-progress-bar"></div>,通过 data-id 或其他唯一标识定位元素,然后直接操作 style.width,稳定不掉帧。
上传场景中每个文件需独立进度条
多文件上传时,如果所有进度条共用同一个 lay-filter="upload",后一个文件的进度会覆盖前一个:
- HTML 中为每个文件生成唯一
lay-filter,比如lay-filter="progress-0"、lay-filter="progress-1" - 在
progress回调里调用element.progress("progress-" + index, n + "%") - 别忘了在
done或error后补上element.progress("progress-" + index, "100%"),否则可能卡在 99%


















