layui表格中switch必须用form.on('switch(filter)')监听，filter需与lay-filter严格一致；value须为字符串且动态生成；异步加载后需在table.done中调form.render('switch')；成功后须手动更新table.cache。
form.on('switch(filter)') 是唯一可靠监听方式
原生 click 或 change 事件在 layui 表格里完全无效——因为表格里的 switch 是渲染后动态插入的伪 DOM，没有真实 input 事件流。必须用表单模块的代理事件：form.on('switch(filter)')，且 filter 值要和模板中 lay-filter 属性**严格一致**（大小写、下划线、连字符一个都不能错）。
常见错误包括：
- 误把
name="status"当作事件绑定依据——name只影响表单提交字段名，不参与事件匹配 - 多个 switch 共用同一
name，导致回调里obj.othis总指向最后一行 DOM，拿到的 ID 和数据全错 - 在表格初始化前就调了
form.on()，但分页/重载后新插入的行不会自动绑定事件
templet 中 value 必须动态生成字符串
模板里不能写死 value="on"，否则所有行切换后都变成相同值，无法区分状态。必须根据原始数据动态输出字符串，且该字符串要和后端约定一致（比如 "1"/"0"、"true"/"false"、"on"/"off"）。
推荐写法（注意是字符串，不是布尔值）：
<script id="switchTpl" type="text/html">
<input type="checkbox"
lay-skin="switch"
lay-filter="stateSwitch"
value="{{d.state === 1 ? '1' : '0'}}"
{{d.state === 1 ? 'checked' : ''}}>
</script>
关键点：
-
d.state === 1 ? '1' : '0'：确保value是字符串，不是数字或布尔 -
checked属性只控制初始态，切换后的状态由value+ 当前勾选决定，不是靠它维持 - 不要写成
value="{{d.state}}"，JS 中true + ''是"true"，但 layui 内部做的是纯字符串比对
异步加载后必须手动调 form.render('switch')
表格用 url 异步加载数据时，form.render('switch') 不能只在页面加载时调一次。分页、搜索、重载后插入的新行，DOM 是后来加的，没被 form 模块接管，开关点击毫无反应。
正确做法是在表格的 done 回调里补 render：
table.render({
elem: '#demo',
url: '/api/list',
page: true,
cols: [[{field: 'state', title: '状态', templet: '#switchTpl'}]],
done: function(res, curr, count){
// 确保新插入的 switch 被 form 模块接管
form.render('switch');
}
});
如果用了 table.reload()，同样要在 reload 的 done 里调一次 form.render('switch')。
回调里怎么拿真实状态和对应行数据
form.on('switch(filter)') 回调参数 obj 里：
-
obj.elem.checked是 UI 当前真实状态（布尔值），不是字符串 -
obj.value是模板里写的value字符串（比如"123"），通常用来传 ID -
obj.othis是当前 switch 的 jQuery 包装对象，可用来找父级 tr
推荐取行数据的方式：
form.on('switch(stateSwitch)', function(obj){
var id = obj.value; // 直接从 value 拿 ID，最稳
var newState = obj.elem.checked ? 1 : 0;
// 防重复提交
$(obj.elem).next().addClass('layui-disabled');
$.post('/api/update', {id: id, state: newState}, function(res){
if(res.code === 0){
// 成功后手动更新缓存，避免翻页丢失状态
var cache = table.cache['demo']; // 'demo' 是表格的 id 参数
var row = cache.find(item => item.id == id);
if(row) row.state = newState;
} else {
// 失败则还原 UI 状态
obj.elem.checked = !obj.elem.checked;
form.render('switch');
}
});
});
真正容易被忽略的是：表格缓存 table.cache 不会自动同步 switch 的变更，异步成功后必须手动更新对应行数据，否则翻页或搜索时状态就丢了。
