element.progress() 更新不了百分比文字是因为只修改width样式,不更新lay-percent属性也不重绘文本;必须三步同步:设置lay-percent属性、调用element.init()、再执行element.progress()。
element.progress() 为什么更新不了百分比文字
因为 element.progress 只改 width 样式,不碰 lay-percent 属性,也不重绘文本节点。你看到的数字还是初始 html 里写的,或者上次 element.init() 解析出来的旧值。
必须同步修改 lay-percent 属性 + 触发 element.init()
文字要变,得让 layui 重新读取属性并渲染文本。只调 element.progress 不够,三步缺一不可:
-
$().attr('lay-percent', '65%')—— 先写新值到 DOM 属性 -
element.init()—— 强制重新解析所有lay-*属性(含lay-showPercent) -
element.progress('yourFilter', '65%')—— 再触发动画和样式更新
lay-showPercent 的真假值陷阱
文字显示依赖这个属性是否“被识别为真”,但它的判断很宽松:
- 设成
yes、true、甚至1都行 - 设成
false或no会彻底禁用文字,且element.init()也救不回来 - 没写这个属性 = 默认不显示文字,哪怕你后面调
element.progress
表格单元格里别用 element.progress
在 table.render 的 templet 里直接写 element.progress 调用,基本无效。原因有二:
- 表格渲染是纯字符串插入,
element.render('progress')不会自动执行 - 就算手动补
element.render(),分页/排序后 DOM 重建,定时器和绑定全丢 - 推荐用原生
<div class="layui-progress-bar"> + <code>style.width更新,靠data-id定位,更稳 实际最易被忽略的点:不是「怎么动」,而是「谁来认这个新值」——lay-percent属性必须存在且可读,element.init()必须在属性更新后立刻执行,否则文字永远卡在初始状态。











