layui 2.8+ 中 loading: true 已废弃,应改用 layer.load() 手动管理;需成对调用开/关、保存索引、覆盖 success/error/finally 等所有异步终点。

table.render() 里 loading: true 已失效,别再用了
layui 2.8+ 版本中 loading: true 已被标记为废弃,它只在表格内部渲染一个极小的灰色图标,不遮挡、不全屏、无法自定义,且在 sort、reload(无 url)等场景下完全不触发。强行使用会导致 loading 状态和实际请求周期错位,比如数据早回来了但图标还在转。
真正可控的 loading 必须用 layer.load() 手动管理
核心原则:开和关必须成对出现,且关的时候要传对那个实例的索引值。layer 的 loading 不会自动销毁,关错、漏关、没存住索引都会导致页面卡死。
-
layer.load()返回一个数字(如12345),必须赋值给变量并确保在 success / error / done 等回调中能访问到 - 推荐写法是把索引挂到 table 实例上:
tableIns.loadIndex = layer.load(2, { shade: 0.1 }) - 关闭时统一用
layer.close(tableIns.loadIndex),之后清空tableIns.loadIndex = null - 别用
layer.closeAll('loading')——它会误杀其他模块正在用的 loading
不同场景下怎么正确触发和关闭
不同触发时机对应不同的生命周期钩子,混用就会残留或提前消失:
- 首次加载:在
table.render()调用前开,done回调里关 - 表头排序:监听
table.on('sort(filter)'),在回调开头开,在done回调里关(注意:sort 不走loading配置) - 操作列按钮点击:在
table.on('tool(filter)')中开,请求返回后($.post().then()或fail())关 - 工具栏按钮:在
table.on('toolbar(filter)')中开,不能依赖表格自身的 reload 回调,必须自己控制异步终点
容易忽略的坑:error 和 finally 场景必须覆盖
很多人只在 success 里关 loading,但网络超时、服务端 500、跨域拦截、甚至用户手贱点了取消请求,都会跳过 success 直接进 error 或 complete。一旦漏处理,loading 就永远挂着。
- 所有异步调用都要配对写
layer.close(),包括fail、always、catch - 如果用了 Promise 链,确保
finally块里执行关闭逻辑 - 不要假设“反正 done 总会执行”——当请求被 abort 或响应格式错误导致 parseData 报错时,
done可能根本不触发


















