templet函数需返回带data-index和data-field的可点击容器（如span），不可直接返回i标签；须用obj.update()更新DOM并手动同步table.cache，配合CSS控制图标状态色与热区，防重复点击及移动端适配。
templet函数里返回可点击的图标容器，别直接写标签
直接在templet里返回<i class="layui-icon"></i>只能静态展示，点不动。必须包裹一层有data-index和data-field的可点击容器，比如<span class="status-icon" data-index="{d.lay_table_index}" data-field="status"><i class="layui-icon"></i></span>。
关键点：
- 用
span或div包住图标，避免直接操作i导致事件绑定失效 -
d.LAY_TABLE_INDEX是 layui 内置行索引，比用d.id更稳定（后端 ID 可能重复或为空） - 必须显式传
data-field，否则后续更新缓存时不知道改哪一列 - 不要在
templet里写onclick="xxx()"内联 JS，统一走 layui 的on('tool')或on('row')事件监听
监听 tool 事件并切换状态值和图标
表格初始化时需配置id（如id: 'data-table'），才能在table.on('tool(data-table)')中精准捕获点击。事件回调里要完成三件事：读当前状态、算新状态、更新视图与缓存。
示例逻辑：
table.on('tool(data-table)', function(obj) {
if (obj.event === 'toggle-status') {
const d = obj.data;
const newStatus = d.status === 'success' ? 'warning' :
d.status === 'warning' ? 'error' : 'success';
// 更新缓存
const cache = table.cache['data-table'];
const idx = cache.findIndex(item => item.LAY_TABLE_INDEX === d.LAY_TABLE_INDEX);
if (idx > -1) {
cache[idx].status = newStatus;
}
// 同步到 DOM（仅当前行）
obj.update({ status: newStatus });
}
});
注意：
-
obj.update()只刷新当前行 DOM，不重载数据，体验更顺 - 别漏掉
cache手动更新，否则翻页后状态回退 - 如果用了
where参数带搜索条件，切换状态后obj.update()不会影响服务端，这是预期行为
图标样式随状态实时变色，靠 class + CSS 控制
templet 返回的图标必须带状态 class，例如<i class="layui-icon status-${d.status}"></i>，然后在页面 或全局样式里补对应规则。
常见写法：
.status-success { color: #52c418; }
.status-warning { color: #faad14; }
.status-error { color: #f5222d; }
容易踩的坑：
- 写了
class="status-success"但没定义 CSS，图标还是默认黑色 - 用
!important强行覆盖，结果和其他组件冲突 - 状态值含空格或特殊字符（如
'in progress'），没做replace(/[^a-z0-9]/g, '-')转义，CSS 类名无效 - 移动端下
font-size太小，图标看不清，建议加.status-icon { font-size: 18px; }
点击区域太小、移动端失焦、重复触发怎么防
原生i标签点击热区窄，尤其在手机上容易误操作；动态插入/切换又可能引发事件冒泡或 focus 失控。
实操建议：
- 给外层
span.status-icon加padding: 4px 8px扩大热区，别只依赖图标本身 - 移动端加
touchstart事件并preventDefault()，避免双击缩放干扰 - 用
one('click', ...)代替on('click', ...)，防止快速连点注册多个 handler - 切换过程中禁用按钮：在
obj.update()前加$(obj.tr).find('.status-icon').addClass('disabled').off('click');，更新完再移除 - 如果表格启用了
height: 'full-xx'，确保.status-icon有position: relative，否则图标可能被裁剪
这事最难的不是换图标，而是每次点击都要同步缓存、触发视图更新、控制热区、防重复——少一步，状态就不同步。
