操作列加载态需手动控制dom：用data-*属性存状态，templet函数动态渲染带layui-anim类的图标，点击时设tr[data-loading]，接口后移除；禁用table.reload，防布局抖动与状态丢失。
操作列图标渲染前如何显示加载态
layui 表格本身不提供「操作列单独 loading」能力，loading 配置只作用于整表数据加载过程。若想在某行操作列（比如点击编辑按钮后）显示局部加载状态，必须手动控制 dom + css，不能依赖 table 模块原生机制。
常见错误是试图用 templet 函数里塞个 layui-icon-loading-1 就完事——但没配动画类、没清旧状态、没防重复点击，结果图标卡死或错乱。
- 操作列图标必须用
templet返回字符串或函数，推荐函数写法，便于动态控制显隐 - 加载态图标需带
layui-anim layui-anim-rotate layui-anim-loop才能转起来 - 每次点击前要先移除上一次的 loading 类（比如用
el.querySelector('.loading')清掉），否则多行同时触发会堆叠 - 建议给操作列容器加固定宽高（如
style="width: 80px;"），避免 loading 图标出现时布局抖动
templet 中动态切换图标与 loading 的写法
templet 是唯一能精准控制单行操作列内容的方式，它接收 data 参数，可据此判断当前行是否处于 loading 状态。关键不是“怎么写图标”，而是“怎么同步状态”。
典型做法：用 data 对象上挂临时字段（如 data._loading = true），再在 templet 里读取并返回对应 DOM。但注意——data 是只读副本，直接改它无效；得靠外部变量或 DOM data- 属性存状态。
- 推荐用
tr元素的data-id或data-index作为 key，配合全局 Map 存 loading 状态：loadingMap.set(data.id, true) -
templet函数内用loadingMap.has(data.id)判断，返回带旋转图标的 HTML 字符串 - 图标必须用 Unicode 实体（如
）或 class + font-icon，不能直接写中文或 emoji - 不要在
templet里调异步操作（如fetch），它只负责渲染；异步逻辑放table.on('tool')回调里
点击操作按钮后如何更新该行 loading 状态
用户点「编辑」按钮那一刻，就要立刻让本行操作列变成 loading 态，等接口返回后再切回图标。这个切换必须原子化，否则会出现“点了没反应”或“点了两次才变”。
核心是：先更新状态、再重绘该行、再发请求。layui 没提供单行重绘 API，只能用 table.cache + table.render 的 trick 方式，或者更轻量的 DOM 替换。
- 最稳做法：用
$(tr).find('.operate-btn').html('<i class="layui-icon layui-anim-rotate layui-anim-loop">ည</i>')直接替换按钮内容 - 别用
table.reload()，它会刷新整页，丢失滚动位置和筛选条件 - 请求成功后，记得把 loadingMap 对应项删掉，并还原图标（比如
编辑图标） - 失败时也要恢复按钮，否则用户以为还在加载——这是最容易被忽略的兜底逻辑
为什么用 data-* 属性比用 JS 变量更可靠
表格翻页、搜索、排序后，DOM 会重建，用闭包变量或全局 Map 存的 loading 状态就断了。而 data- 属性随 DOM 节点存活，只要节点在，状态就在。
实操中，把 loading 标记存在 tr 上比存在 td 更稳妥，因为 tr 是 table 模块真正管理的单元，不会被 templet 无意覆盖。
- 点击时：用
$(this).closest('tr').data('loading', true) - templet 里：用
$(tr).data('loading')判断，返回对应图标 - 接口返回后：用
$(tr).removeData('loading')清理，避免内存泄漏 - 配合 CSS 属性选择器更省事：
tr[data-loading] .operate-btn::before { content: "\e63d"; }
真正麻烦的不是写几行代码，而是 loading 状态和 DOM 生命周期的对齐——哪一刻该设、哪一刻该删、哪一刻该重绘，全靠你盯住 table 模块的渲染节奏。稍一松懈，就会出现“图标转着转着没了”或者“点了十次才响应一次”。
