必须使用 element.on('tab(filter)') 监听，且需在 layui.use(['element'], callback) 内执行，filter 必须与 lay-filter 属性值完全一致（大小写敏感、无引号），回调参数 data 包含 index、elem 和 field（优先用 field 分发逻辑），支持点击、js 调用及 url hash 切换。
必须在 layui.use 中初始化并监听
监听代码必须放在 layui.use(['element'], function(){}) 回调内，确保 element 模块已加载、DOM 已就绪：
- 写在
layui.use外面 → 监听无效（element未定义） - 写在
$(document).ready()里但没等 layui 加载 → 同样失效 - 监听语句要在
element.render('tab')之后（如果手动 render 过）
filter 必须与 HTML 中的 lay-filter 完全一致
你的 tab 容器需明确设置 lay-filter 属性，例如：
那么监听时的字符串必须一字不差：
- ✅ 正确：
element.on('tab(userTab)', callback) - ❌ 错误：
element.on('tab(usertab)')（大小写敏感） - ❌ 错误：
element.on('tab("userTab")')（引号多余，语法报错）
回调函数能拿到当前激活项的关键信息
监听回调的参数 data 是一个对象，包含：
-
data.index：当前激活 tab 的索引（从 0 开始） -
data.elem：当前激活的.layui-tab-item元素（DOM 对象） -
data.field：仅当 tab 标题有lay-id时存在，值为该lay-id
推荐优先用 data.field（即 lay-id）做逻辑分发，比索引更稳定——因为 tab 可能动态增删，索引会变。
它响应所有切换方式，不只是鼠标点击
这个监听对以下行为全部生效：
- 用户点击 tab 标题
- JS 调用
element.tabChange('userTab', 'order') - URL Hash 触发的自动切换（如
#current=order）
不需要额外兼容，开箱即用。
