Layui table如何实现自定义渲染操作列的加载状态

操作列加载态需手动控制DOM：用data-*属性存状态，templet函数动态渲染带layui-anim类的图标，点击时设tr[data-loading]，接口后移除；禁用table.reload，防布局抖动与状态丢失。

操作列图标渲染前如何显示加载态

layui 表格本身不提供「操作列单独 loading」能力，loading 配置只作用于整表数据加载过程。若想在某行操作列（比如点击编辑按钮后）显示局部加载状态，必须手动控制 DOM + CSS，不能依赖 table 模块原生机制。

常见错误是试图用 templet 函数里塞个 layui-icon-loading-1 就完事——但没配动画类、没清旧状态、没防重复点击，结果图标卡死或错乱。

1. 操作列图标必须用 templet 返回字符串或函数，推荐函数写法，便于动态控制显隐
2. 加载态图标需带 layui-anim layui-anim-rotate layui-anim-loop 才能转起来
3. 每次点击前要先移除上一次的 loading 类（比如用 el.querySelector('.loading') 清掉），否则多行同时触发会堆叠
4. 建议给操作列容器加固定宽高（如 style="width: 80px;"），避免 loading 图标出现时布局抖动

templet 中动态切换图标与 loading 的写法

templet 是唯一能精准控制单行操作列内容的方式，它接收 data 参数，可据此判断当前行是否处于 loading 状态。关键不是“怎么写图标”，而是“怎么同步状态”。

典型做法：用 data 对象上挂临时字段（如 data._loading = true），再在 templet 里读取并返回对应 DOM。但注意——data 是只读副本，直接改它无效；得靠外部变量或 DOM data- 属性存状态。

1. 推荐用 tr 元素的 data-id 或 data-index 作为 key，配合全局 Map 存 loading 状态：loadingMap.set(data.id, true)
2. templet 函数内用 loadingMap.has(data.id) 判断，返回带旋转图标的 HTML 字符串
3. 图标必须用 Unicode 实体（如 ）或 class + font-icon，不能直接写中文或 emoji
4. 不要在 templet 里调异步操作（如 fetch），它只负责渲染；异步逻辑放 table.on('tool') 回调里

点击操作按钮后如何更新该行 loading 状态

用户点「编辑」按钮那一刻，就要立刻让本行操作列变成 loading 态，等接口返回后再切回图标。这个切换必须原子化，否则会出现“点了没反应”或“点了两次才变”。

核心是：先更新状态、再重绘该行、再发请求。layui 没提供单行重绘 API，只能用 table.cache + table.render 的 trick 方式，或者更轻量的 DOM 替换。

1. 最稳做法：用 $(tr).find('.operate-btn').html('ည') 直接替换按钮内容
2. 别用 table.reload()，它会刷新整页，丢失滚动位置和筛选条件
3. 请求成功后，记得把 loadingMap 对应项删掉，并还原图标（比如  编辑图标）
4. 失败时也要恢复按钮，否则用户以为还在加载——这是最容易被忽略的兜底逻辑

为什么用 data-* 属性比用 JS 变量更可靠

表格翻页、搜索、排序后，DOM 会重建，用闭包变量或全局 Map 存的 loading 状态就断了。而 data- 属性随 DOM 节点存活，只要节点在，状态就在。

实操中，把 loading 标记存在 tr 上比存在 td 更稳妥，因为 tr 是 table 模块真正管理的单元，不会被 templet 无意覆盖。

1. 点击时：用 $(this).closest('tr').data('loading', true)
2. templet 里：用 $(tr).data('loading') 判断，返回对应图标
3. 接口返回后：用 $(tr).removeData('loading') 清理，避免内存泄漏
4. 配合 CSS 属性选择器更省事：tr[data-loading] .operate-btn::before { content: "e63d"; }

真正麻烦的不是写几行代码，而是 loading 状态和 DOM 生命周期的对齐——哪一刻该设、哪一刻该删、哪一刻该重绘，全靠你盯住 table 模块的渲染节奏。稍一松懈，就会出现“图标转着转着没了”或者“点了十次才响应一次”。