最简单可靠的方案是直接修改按钮innerhtml并禁用：先保存原始内容，再替换为带layui-loading图标的html并设disabled，异步完成后用always恢复；禁用layer.load()因其全局遮罩、状态脱节、位置不可控且易致内存泄漏。
layui table 中按钮点击后如何显示 loading 效果
直接改按钮 innerHTML 加 loading 文字 + 禁用是最简单可靠的方案，不需要依赖 layui 内部未公开的 loading 接口或重写渲染逻辑。
为什么不能用 layer.load() 覆盖整个表格或单元格
因为 layer.load() 是全局浮层，会遮挡整行甚至整个表格，影响用户继续操作其他行；而且它和按钮本身状态脱节——按钮仍可点击、loading 不随按钮消失而自动关闭，容易引发重复提交或状态不一致。
- layer.load 的 loading 图标位置不可控，无法精准对齐按钮内部
- 关闭需手动调用
layer.close()，容易遗漏导致 loading 残留 - 在表格滚动、分页、重载时 layer 实例可能丢失引用，造成内存泄漏
推荐做法：原地修改按钮 DOM 并禁用
在 table.on('tool') 回调里，先保存原始文字，再替换为带 loading 图标的 HTML，同时设置 disabled。操作完成后恢复——这是最贴合用户预期、兼容性最好、也最容易排查问题的方式。
table.on('tool(test)', function(obj){
var data = obj.data;
var $btn = $(obj.tr).find('.btn-submit');
<p>// 1. 记录原始内容和状态
var originHtml = $btn.html();
var originDisabled = $btn.prop('disabled');</p><p>// 2. 设置 loading 状态（使用 layui 内置的 loading icon）
$btn.html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate"></i> 提交中…')
.prop('disabled', true);</p><p>// 3. 执行异步操作（例如 Ajax）
$.post('/api/submit', {id: data.id}, function(res){
layer.msg('操作成功');
}).always(function(){
// 4. 无论成功失败都恢复按钮
$btn.html(originHtml).prop('disabled', originDisabled);
});
});</p>
- 务必用
.always()而非.then()或.done()，确保异常、网络失败时也能还原按钮 - 不要用
setTimeout模拟 loading，真实接口响应时间不确定，硬设延时反而误导用户 - 如果按钮有
data-*属性或绑定过事件，仅改html()不会影响这些，但若用了empty().append()就会丢失事件，应避免
注意按钮容器是否被 layui 重渲染
如果表格启用了 autoSort: true 或触发了 table.reload()，当前行 DOM 可能被销毁重建，导致你之前绑定的按钮状态失效或 jQuery 对象指向空节点。此时不能依赖缓存的 $btn 引用，而应在每次点击时动态查找：
// ✅ 正确：每次都在当前行内重新找
var $btn = $(obj.tr).find('.btn-submit');
而不是在事件外提前定义 var $btn = $('.btn-submit') —— 那样会匹配到所有行，且 reload 后引用就断了。
loading 状态本质是 UI 与请求生命周期的强绑定，漏掉任意一环（比如没恢复、没禁用、没找对节点）都会让用户困惑。把「按钮变灰+加转圈+不可点」这三件事做全，比追求“更优雅的封装”更重要。
