layui table的loading“死循环转圈”主因是手动layer.load()未正确关闭,常见于索引变量作用域丢失、done回调未执行或response配置不匹配后端返回结构。

layui table 的 loading 条什么时候会“死循环转圈”
不是表格本身卡住,而是你手动加了 layer.load() 却没关,或者 table.render() 的 done 回调根本没执行。Layui 表格原生的 loading: true 是自动开关的,不会残留;但凡出现“一直转”,基本是你混用了 layer 加载层,且索引丢了、作用域断了、回调没进、或关错了对象。
layer.load() 索引必须保存在能被 done 回调访问到的地方
这是最常踩的坑:把 layer.load() 写在 table.render() 外面,却用 var 声明索引,或把它塞进 if/for 里,导致 done 执行时变量已失效或为 undefined。
- ✅ 正确写法:用
let或外层const明确持有,比如const loadingIndex = layer.load(1, { shade: [0.3, '#000'] }); - ❌ 错误写法:
var loadingIndex; for (...) { loadingIndex = layer.load(...); }→ 所有done都关最后一个 - ⚠️ 注意:不要在
parseData或request配置里提前调layer.close(),那时数据还没回来,done都没触发
table.render 的 done 回调不执行?先查 response 配置是否匹配后端
done 不执行,layer.load() 就永远挂着——因为关 loading 的那行代码根本没跑。常见原因是后端返回结构和 Layui 的 response 字段对不上,表格判定“加载失败”,跳过 done。
- 检查后端实际返回字段,比如是
{ code: 0, data: [...] },但你写了response: { statusCode: 1 }→ 匹配失败,done跳过 - 打开浏览器 Network 面板,确认请求成功(HTTP 200)、响应体可解析、无 CORS 或 parser error
- 临时把
response配置全删掉,看done是否能进 —— 如果能,说明是字段名或逻辑判断问题
别用 layer.closeAll('loading') 图省事
它会干掉页面上所有 loading 层,包括表格分页、上传预览、甚至第三方插件正在用的实例。A 模块刚开 loading,B 模块出错执行了 layer.closeAll('loading'),A 的 loading 就消失了,用户看到空白等待,还以为卡死了。
- ✅ 稳妥做法:每个业务请求自己开、自己关,索引不共享、不污染
- ⚠️ 唯一可兜底的场景:页面卸载前清理,比如
window.addEventListener('beforeunload', () => layer.closeAll('loading')),但仅限非常规场景 - ❌ 不要放在
setTimeout里无条件关 —— 请求可能早于定时器完成,loading 被提前杀掉
layer.load() 是两套机制。前者随数据渲染自动收,后者必须靠你攥着那个数字索引亲手关——这个索引一旦脱离作用域,就再也没法找回来。


















