必须用templet函数+data-属性管理按钮状态，onclick调用window下挂载的切换函数，内联style控制图标和颜色，done回调兜底恢复状态，禁止依赖js变量或class切换。
操作列按钮点击后切换图标和颜色必须用 templet + data- 属性管理状态
直接在 templet 里返回带 onclick 的按钮 html，并把当前状态（如是否启用、是否已操作）存在 data-status 或 data-checked 这类属性中，而不是靠 js 变量或闭包记忆。layui 表格重绘（分页、reload、搜索）后 dom 全量替换，事件和变量都会丢失。
常见错误是写一个全局函数 toggleBtn() 在 templet 里调用，但该函数在渲染时可能未定义，或上下文错乱；更糟的是用 $(this).toggleClass() 之类操作，重绘后样式直接归零。
-
templet必须返回完整 HTML 字符串，例如：<button class="layui-btn layui-btn-sm" data-status="off" onclick="toggleStatus(this)">●</button> - 状态切换逻辑写在独立函数里，且该函数需挂到
window下（如window.toggleStatus = function(el) { ... }），确保渲染时可访问 - 图标切换推荐用 Unicode 符号（如
●/○）、Layui 图标字体（<i class="layui-icon"></i>）或 SVG 内联，避免依赖外部 CSS 类名被覆盖 - 颜色切换不要只改
color，要同步控制background-color和border-color，否则按钮看起来“半残”
颜色与图标必须用内联 style 控制，不能只靠 class 切换
Layui 按钮默认有大量内联样式（比如 style="background-color: #009688;"），会盖掉你通过 addClass 添加的 CSS 类。想稳，就得用 el.style.backgroundColor = 'xxx' 和 el.innerHTML = '新图标' 直接改 DOM 属性。
别信“我加了 .btn-active 类，也写了 !important”，Layui 的内联样式权重永远高于 class，除非你用 JS 强制覆盖。
- 点击后改色示例：
el.style.backgroundColor = el.dataset.status === 'on' ? '#ff5252' : '#4ecdc4'; - 图标更新示例：
el.innerHTML = el.dataset.status === 'on' ? '✓' : '●'; - 记得同步更新
dataset：el.dataset.status = el.dataset.status === 'on' ? 'off' : 'on'; - 如果用了
layui-btn-disabled状态，也要手动处理：el.disabled = true; el.style.opacity = '0.6';
reload 或分页后按钮状态丢失？必须在 done 回调里恢复
table.reload() 或翻页后，所有按钮 DOM 被重建，data- 属性和内联样式全丢。你得在表格的 done 回调里遍历当前页数据，根据字段值（比如 row.isApproved）重新设置每个按钮的状态。
别指望 templet 自动读取数据字段再渲染——它确实会执行，但你得在 templet 函数里显式判断 row.isApproved 并返回对应图标和样式，而不是等点击后再“补救”。
- 在
cols配置中，templet必须是函数，接收row参数：templet: function(row) { return row.isApproved ? '<button style="background:#4caf50" data-status="on">✓</button>' : '<button style="background:#f44336" data-status="off">●</button>'; } -
done回调只用于兜底：当后端返回的数据字段不可靠（比如异步加载延迟），才用它做二次同步 - 如果按钮行为影响其他列（比如点“启用”后，“操作”列另一按钮变灰），这些联动逻辑也得在
templet里一并判断，别拆到 click 事件里
渐变色按钮点击后颜色突变不自然？必须手动补 hover 和 active 样式
用了 background: linear-gradient() 的按钮，点击瞬间会触发浏览器默认的 :active 压感效果，但 Layui 不接管这个，结果就是颜色“闪一下”或直接变黑。这不是 bug，是你没覆盖。
渐变按钮的交互体验差，90% 是因为只写了正常态，漏了 :hover 和 :active。而且注意：Layui 2.8+ 默认给按钮加了 transition: all .3s，如果你的渐变色跳变太猛，还得统一配速。
- CSS 中必须声明：
.layui-btn-gradient:hover { background: linear-gradient(to right, #ff3b30, #34c759) !important; } - 同理加：
.layui-btn-gradient:active { background: linear-gradient(to right, #d72a2a, #299e47) !important; } - 如果按钮有
disabled状态，也得单独写：.layui-btn-gradient[disabled] { opacity: 0.5 !important; } - JS 里改色时，建议用
el.style.transition = 'background 0.2s ease';保持和 CSS hover 一致
实际最易忽略的点：templet 函数里不能用箭头函数简写（如 templet: (row) => { ... }），Layui 内部调用时会丢失 this 上下文，导致某些版本报错；一律用 function(row) { ... } 或 ES5 写法。
