默认 loading: true 无法实现动态加载提示,因其仅插入静态文案且不暴露 DOM 和更新入口;必须通过 request.beforeSend 启动定时器、手动管理 loading 元素,并在 done/error 中统一清理定时器和隐藏元素。
默认的 loading: true 只能显示静态“加载中…”文字,且无法干预内容或时机;真要实现动态提示(比如每秒加一个点),必须绕过内置 loading,手动接管请求生命周期。
为什么不能只靠 loading: true
这个配置只是让 Layui 在表格容器里插入一个固定文案的 <div>,它不暴露 DOM 引用,也不提供更新入口。你改不了文字、停不了动画、清不掉残留——尤其在请求失败后,loading 状态常卡住不动。
-
done回调是数据渲染完才触发,属于“加载后”,不是“加载中” -
parseData仅处理响应体,拿不到请求发起时刻 - 想每秒更新文字,必须在请求发出后立即启动定时器,且得确保它能被清理
用 request.beforeSend 启动动态 loading
Layui 表格底层用 jQuery.ajax,request 配置项允许你透传 beforeSend、error 等钩子。这是唯一能精确捕获“请求已发、响应未回”窗口期的地方。
- 先给表格容器加一个明确占位元素:
<div id="table-loading" style="text-align:center;padding:20px;color:#999;">加载中…</div> - 在
request.beforeSend里显示该元素,并启动setInterval每秒更新文字 - 把定时器 ID 挂到
xhr实例上(如xhr._loadingTimer),方便后续清理 - 别在
done或error里直接操作this.request.beforeSend—— 它不是函数引用,而是配置对象
在 done 和 error 中正确清理定时器
清理动作必须覆盖所有退出路径:成功、失败、超时。漏掉任意一种,定时器就泄露,文字持续跳动,甚至影响后续请求。
- 在
done回调里,用$('#table-loading').hide()隐藏元素 - 在
error回调里做同样操作,并调用clearInterval(xhr._loadingTimer) - 不要依赖
obj或this去查 timer —— 请求对象才是唯一可靠来源 - 如果用了自定义
request函数(比如改用 fetch),就得自己模拟beforeSend和complete逻辑,timer 清理点必须和请求结束严格对齐
最易被忽略的是:当表格启用了 height 且设置了固定高度时,自定义 loading 元素若没设 position: absolute 和足够 z-index,会被裁剪不可见——这点调试时很难发现,得手动检查 computed styles。


















