layui element.progress() 不支持动态更新文字提示,需手动同步三步:修改 lay-percent 属性、调用 element.init() 重解析、再执行 element.progress() 更新宽度;文字可自定义,但 lay-showPercent 必须设为 yes/true/1/空值才生效。

layui 的 element.progress() 本身不支持动态更新进度条上的文字提示(比如“上传中…”,“上传中..”),因为它只修改进度条宽度样式,不重绘或响应式更新 lay-percent 属性和关联的文本节点。要实现文字随进度实时变化(如加点动画、显示百分比、描述状态),必须绕过默认逻辑,手动控制 DOM 和初始化流程。
必须同步三步:改属性 + 重初始化 + 再调用
仅执行 element.progress('filter', '60%') 是无效的——它不会刷新右侧/内部显示的文字。真正起效需严格按顺序操作:
- 用
$().attr('lay-percent', '正在处理...')或$().attr('lay-percent', '75%')更新属性值(注意:文字内容可为任意字符串,不限于数字) - 立即调用
element.init(),强制 layui 重新解析所有lay-*属性,包括lay-percent和lay-showPercent - 再执行
element.progress('yourFilter', '75%'),触发动画和样式更新(这一步仍需传入合法数值,否则宽度不更新)
文字提示可自定义,但 lay-showPercent 要设对
进度条是否显示文字,取决于 lay-showPercent 属性是否被识别为“真值”。它不区分大小写,但有明确规则:
- 设成
yes、true、1或留空(lay-showPercent)都有效 - 设成
false、no或0会彻底禁用文字,且element.init()也无法恢复 - 初始 HTML 中建议写:
<div class="layui-progress" lay-showPercent="true"><div class="layui-progress-bar" lay-percent="加载中..."></div></div>
表格单元格里别用 element.progress
在 table.render() 的 templet 函数中直接写 element.progress() 基本无效。原因有两个:
- 表格渲染是纯字符串插入,
element.render('progress')不会自动执行 - 分页、排序后 DOM 重建,已绑定的定时器和事件全部丢失
- 推荐替代方案:用原生
<div class="layui-progress-bar">+style.width控制,配合data-id定位更新,更稳定可控
大号进度条(layui-progress-big)注意事项
使用 layui-progress-big 类时,文字默认居中显示在进度条内部,但前提是:
-
lay-showPercent="true"必须存在且生效(不能是false) -
lay-percent属性值可以是文字(如"校验中"),但element.progress()函数本身只接受数字+%或分数字符串;所以动态更新文字时,应只走attr + init流程,跳过最后的progress()调用(宽度不变时) - 若需同时更新文字和宽度,先
attr('lay-percent', '82%')→element.init()→element.progress('filter', '82%')


















