layui table.render 的 loading 进度条默认在数据渲染完成后自动移除,但若 done 回调含异步操作则会提前消失;正确做法是设 loading: false 并手动管理自定义遮罩。
渲染完成后的进度条不会自动消失,是因为 layui 的 table.render() 默认不控制加载状态 ui;你得自己接管它。
table.render 的 loading 参数控制初始加载状态
进度条是否显示、何时出现,由 loading 配置项决定。默认为 true,即表格初始化时自动显示内置 loading 效果(灰色半透明遮罩 + 旋转图标)。这个 loading 会在数据返回并完成渲染后**自动移除**——但前提是没被手动干扰。
- 显式设
loading: false就完全不显示进度条,也就谈不上“消失”逻辑 - 设
loading: true(默认)时,Layui 内部会在done回调执行完毕后自动清理 DOM 中的 loading 层 - 如果你在
done里做了异步操作(比如请求额外数据、DOM 操作耗时),Layui 不会等它,loading 仍会提前消失——这时用户可能看到空白或错位,误以为卡住
done 回调里手动控制 loading 显示/隐藏的风险
有人试图在 done 里用 jQuery 找 .layui-table-loading 并 .remove() 或 .hide(),这是错的:Layui 自己管理该元素生命周期,手动操作容易删错节点、触发重复渲染或内存泄漏。
-
done是渲染完成的信号,不是 loading 消失的“安全时机”——它和 loading 移除是两个独立流程 - 若你在
done里又发起新请求(如补全关联数据),应另起一套 loading 控制(比如在容器上加自定义遮罩),而不是复用表格原生 loading - 不要依赖
$(".layui-table-loading").length判断 loading 是否还在,它可能已被销毁但变量引用未清
需要自定义 loading 行为时的正确做法
真正可控的方式,是绕过 Layui 默认 loading,全程自己管理:
- 初始化时设
loading: false - 在
table.render()调用前,手动给表格容器加遮罩:$("#tableId").parent().append('<div class="custom-loading"></div>') - 在
done回调第一行就移除遮罩:$(".custom-loading").remove() - 如果
done里有后续异步逻辑,把遮罩移除延迟到所有操作结束:Promise.all([...]).then(() => $(".custom-loading").remove()) - 注意:遮罩要覆盖整个表格区域(包括分页栏),建议加在
#tableId的父容器上,而非#tableId自身——后者会被 Layui 重绘覆盖
最易被忽略的是:Layui 的 loading 只响应首次渲染,reload 时若没显式传 loading,会沿用初始配置;而很多人在 reload 时忘了重置自定义遮罩状态,导致多次叠加或残留。











