Layui表格动态Loading需在request.beforeSend中启动定时器更新文字，done/error中清除；原生loading:true仅支持静态提示且无法干预。
不能靠 table.render() 的 done 回调实现“渲染前”的 loading 动态更新——因为 done 是渲染完成后才触发的。真正在请求发出后、数据返回前显示并更新 loading，得从请求发起阶段介入。
用 beforeSend 拦截 AJAX 并手动控制 Loading 区域
Layui 表格底层用的是 jQuery.ajax，支持 beforeSend 钩子。虽然 table 模块没直接暴露这个参数，但你可以在 render() 的 request 配置里透传过去：
- 先给表格容器加一个明确的 Loading 占位元素，比如：
<div id="table-loading" style="text-align:center;padding:20px;color:#999;">加载中…</div> - 在
table.render()中配置request，把beforeSend和error都接管住 -
beforeSend里启动定时器，每秒更新文字；error或done里清除定时器并隐藏 Loading
table.render({
elem: '#demo',
url: '/api/list',
request: {
// 透传到内部 $.ajax 的参数
beforeSend: function(xhr, settings) {
const loadingEl = $('#table-loading');
loadingEl.show();
const timer = setInterval(() => {
const dots = ['.', '..', '...'];
const idx = (dots.indexOf(loadingEl.text().trim().slice(-3)) + 1) % 3;
loadingEl.text('加载中' + dots[idx]);
}, 1000);
// 把 timer 挂到 xhr 上，方便后续清理
xhr._loadingTimer = timer;
}
},
done: function(res, curr, count) {
$('#table-loading').hide();
if (this.request && this.request.beforeSend) {
// 清理可能残留的 timer
clearInterval(this.request.beforeSend.toString().includes('_loadingTimer') ?
this.request.beforeSend._loadingTimer : null);
}
}
});
为什么不能只靠 loading: true 配置
Layui 原生的 loading: true 只会显示静态的「加载中」三个字，不支持自定义文案，更无法动态更新。它内部是用 CSS 遮罩 + 固定文字实现的，没有提供钩子让你插入手动控制逻辑。
- 开启
loading: true后，Layui 会在表格容器内插入一个.layui-table-loading元素，但 DOM 结构不可预测，且无事件绑定入口 - 即使你用 JS 去轮询修改那个元素的文字，也容易被 Layui 内部重绘覆盖（尤其在分页、排序触发重载时）
- 原生 loading 不区分“请求中”和“空数据”，而你真正需要的是“请求已发、响应未到”这个精确状态
定时器清理不及时会导致文字继续跳动
最常踩的坑是：请求失败或用户快速切换页面后，setInterval 还在跑，导致 Loading 文字持续闪烁，甚至报错“Cannot set property ‘text’ of undefined”。
- 务必在
done、error、以及可能的before（如用户点击取消按钮）三处都做clearInterval - 不要把 timer 存在全局变量里——多个表格共存时会互相干扰；推荐挂到
xhr实例或表格实例的私有属性上（如this._loadingTimer） - 如果用了
table.reloadData()，记得在新请求发起前先清旧 timer，否则会出现多个定时器叠加
真正可靠的 Loading 动态更新，本质是绕过 Layui 的 loading 封装，自己接管请求生命周期。所有“改文字”的操作，必须严格绑定在请求开始与结束之间，差一秒都可能出问题。
