table.render的loading属性不生效，是因为仅当配置url且未传data时才自动触发；若用本地data、权限拦截返回空数据、低版本不支持HTML模板或reload未继承配置，均会导致失效。
table.render 的 loading 属性不生效？先确认是否用了 url 模式
只有设置了 url 且未设 data（即走异步请求），loading 才会自动触发。如果表格用的是本地 data: []，哪怕写了 loading: true，也不会显示任何加载状态。
常见误判点：
- 初始化时写了
url，但后续table.reload()传了data覆盖，导致分页点击时静默走本地渲染，loading彻底失效 - 权限拦截或后端返回空数据（如
{code:401}），Layui 认为“请求已完成”，不触发 loading，也不报错 - v2.9.10 以下版本不支持 HTML 字符串形式的
loading，传入字符串会被忽略，只认布尔值
想换图标或加文字？优先用 v2.9.10+ 的 loading 字符串模板
这是最轻量、最可控的方式，无需额外 CSS 或监听钩子，直接在 table.render() 里写：
loading: '<i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 24px; color: #009688;"></i><span style="margin-left: 8px;">正在加载...</span>'
注意几个硬性条件：
- 必须是 Layui v2.9.10 或更高版本，低版本会直接丢弃该字符串，回退到默认文字
- HTML 内容会被插入到
.layui-table-loading容器中，不能含 script 标签，避免 XSS -
layui-anim-rotate和layui-anim-loop缺一不可，否则图标不转 - 不要用
layui-icon-loading（静止图标），得用layui-icon-loading-1（可动画版本）
分页点击没 loading？本质是 reload 时没继承原配置
Layui 分页点击底层调用的是 table.reload()，但它**不会自动带上初始化时的 loading 配置**，除非你在 page: { layout: [...] } 中显式控制，或重写 request.jump。
稳妥做法是在 request 钩子里手动接管：
request: {
pageName: 'page',
limitName: 'limit',
// 分页跳转前手动开 layer.load
jump: function(obj, first) {
if (!first) {
// 非首次渲染（即分页点击），打开 loading
this.loadIndex = layer.load(1, { shade: [0.2, '#fff'] });
}
}
},
done: function(res, curr, count) {
// 渲染完成后关闭
if (this.loadIndex) {
layer.close(this.loadIndex);
this.loadIndex = null;
}
}
关键细节：
-
jump是唯一能捕获“用户点击分页按钮”这一动作的钩子，beforeSend在某些旧版中不可靠 - 必须把
loadIndex挂在this上（即表格实例），否则done回调拿不到引用 - 别在
jump里直接调layer.close()—— 此时请求还没发，关早了
自定义动画要覆盖 CSS？重点盯死 .layui-table-loading 的 display 和 position
如果你用的是 CSS 方案（兼容所有版本），核心不是改图标，而是确保自定义内容能完整展示。Layui 默认给 .layui-table-loading 设了 display: none 和 position: absolute，容易导致 flex 居中失效或被遮挡。
必须加的 CSS：
.layui-table-loading {
display: flex !important;
justify-content: center !important;
align-items: center !important;
position: relative !important;
background: transparent !important;
}
.layui-table-loading i {
font-size: 28px !important;
color: #1E9FFF !important;
}
容易踩的坑：
- 没加
!important—— Layui 内联样式优先级高，普通类名压不住 - 忘了设
position: relative—— 导致内部元素absolute定位错乱 - 用
.layui-table-view做父容器加 flex，结果表格重绘时 flex 状态丢失 - 动画用
animation自定义 keyframes，但没配transform-origin: center，旋转偏移
复杂点在于：分页重绘会重建整个 .layui-table-loading DOM，所以 CSS 必须作用于类名本身，不能依赖临时添加的 class。
