layui 表头排序时不走 loading 配置，因其 sort 逻辑绕过 request 流程、不读取 loading 字段，仅首次渲染或带 url 的 reload 才生效；需手动在 sort 事件中用 layer.load() 控制，并通过 .layui-table-sort-loading 类定制样式。
点击表头排序时，layui 默认会显示内置 loading 动画，但这个动画不可直接替换为自定义 html —— loading 配置项在 sort 场景下不生效，必须手动接管。
为什么 sort 时不走 loading 配置？
Layui 的 table.sort() 触发的是内部重载逻辑，它绕过了 request 流程，也不读取 loading 字段。即使你写了 loading: '<i class="...">...</i>'，排序时依然只显示默认灰色半透明遮罩 + 文字“加载中”。
- 只有通过
url发起的首次渲染或table.reload()（含有效url）才会识别loading配置 -
sort事件本质是参数变更后调用table.reload({ where: { ... } })，但若没显式传url，就退化为本地排序，不触发 loading - 官方未暴露 sort 过程中的 loading 控制钩子，只能靠 DOM 干预
手动在 sort 事件里加 layer.load()
监听 table.on('sort(yourFilter)')，在回调开头调 layer.load(2)，并在 done 回调里关掉——这是目前最稳的方案。
- 必须提前存住
loadIndex，比如挂到 table 实例上：tableIns.loadIndex = layer.load(2) -
done回调一定得写，哪怕只是空函数，否则 loading 残留；error回调里也建议补layer.close(loadIndex) - 别在
sort回调里直接table.reload()后再开 loading —— 这会导致两个 loading 叠加：一个 sort 自带的，一个你手动开的 - 示例片段：
table.on('sort(test)', function(obj){
// 关闭可能残留的旧 loading
if (this.loadIndex) layer.close(this.loadIndex);
this.loadIndex = layer.load(2, { shade: 0.1 });
// 手动 reload，确保带 url 和排序参数
table.reload('test', {
initSort: obj,
where: { field: obj.field, order: obj.type }
});
});
table.on('done(test)', function(res){
if (this.loadIndex) {
layer.close(this.loadIndex);
this.loadIndex = null;
}
});
覆盖 .layui-table-sort-loading 样式（仅 v2.9.10+）
Layui 2.9.10 起，sort 过程中插入的 loading 容器类名是 .layui-table-sort-loading，不是 .layui-table-loading —— 这个细节很多人漏掉，导致 CSS 白写。
- 直接覆盖该类即可改颜色、大小、文字，例如：
.layui-table-sort-loading { background: rgba(255,255,255,0.85); } - 图标控制要写对路径：
.layui-table-sort-loading i或.layui-table-sort-loading .layui-icon - 字体大小建议设
font-size: 14px，太大会撑破容器；文字用::after伪元素可避免影响布局 - 注意：这个类只在 sort 时存在，reload 时还是用
.layui-table-loading，两套样式得分开写
容易被忽略的关键点
排序 loading 的定位依赖表格容器的 position: relative 和明确高度（如 min-height: 300px），否则遮罩会飘到页面顶部；另外，如果表格嵌在 lay-module="laypage" 或其它模块里，layer.load() 的 shade 值要调低（比如 0.1），不然会盖住分页栏。
