Layui tab切换必须用element.on('tab(filter)')监听，filter需与lay-filter值完全一致；监听须在layui.use内提前绑定；动态tab需确保element.init()已执行；tab切换时用data.index防重复请求；table.reloadData()用于仅更新数据，table.reload()用于结构变更。
element.on('tab(filter)') 是唯一可靠监听方式
直接写 layui.tabchange 或监听 dom 的 click 事件都无效——layui 的 tab 切换不派发原生事件，tabchange 也不是函数名，而是 element.on() 的事件类型字符串。必须用 element.on('tab(xxx)')，且 xxx 必须和 html 中 lay-filter="xxx" 的值完全一致。
常见错误：容器写了 lay-filter="userTab"，但 JS 里写成 element.on('tab(usertab)')（大小写/拼写差一位）或 element.on('tab(user-tab)')（多了连字符），结果回调永不触发。
- 监听代码必须放在
layui.use(['element'], callback)内部执行 - 不能在 AJAX 加载完 tab 内容后再去绑定——要提前绑定，否则第一次切换就漏掉
- 如果 tab 是动态插入的（比如用 JS 拼 HTML 后 append），需确保
element.init()已执行或手动调用element.tab({elem: '#xxx'})
重载表格前必须判断是否真切换了
用户点同一个 tab 标题，element.on('tab(xxx)') 仍会触发，但你不该重复请求数据。靠全局变量记上一次索引是最轻量的解法：
let lastTabIndex = -1;
element.on('tab(userTabs)', function(data) {
if (lastTabIndex === data.index) return;
lastTabIndex = data.index;
// 此处调用 reload 或 reloadData
});
注意：不要用 $(this).index() 或查 DOM 类名来判断当前项——data.index 是最准的，它来自 Layui 内部计数，不受 DOM 结构变动影响。
- 避免把
lastTabIndex声明在回调函数内，否则每次都是undefined，永远不等于data.index - 如果多个 tab 组共用同一套逻辑，变量名要区分，比如
lastUserTabIndex、lastOrderTabIndex - 页面刷新后变量重置是正常行为，无需持久化
table.reload() 和 table.reloadData() 别乱选
只换数据、列结构和分页参数不变，用 table.reloadData()；改了字段、加了列、换了接口地址，必须用 table.reload()。混用会导致滚动位置跳回顶部、当前页码重置、甚至控制台报错“Cannot read property 'config' of undefined”。
典型场景：
- 搜索框输入后按回车 →
table.reload('userTable', { where: { keyword: val } }) - tab 切换只是换状态筛选（如 status=1 → status=2）→
table.reloadData('userTable', { where: { status: 2 }, scrollPos: 'fixed' }) - 切换 tab 同时要调整表格高度（比如从列表页切到详情统计页）→
table.reload('userTable', { height: 'full-180' })
关键细节：table.reloadData() 默认保留当前页码和滚动位置，table.reload() 默认回到第一页——除非你显式传 page: { curr: table.config.page.curr }。
reload 后没新数据？先盯住这三处
不是代码没跑，而是常卡在“以为发了请求，其实根本没走网络”。打开浏览器 Network 面板，过滤 XHR，看有没有对应接口请求发出：
-
table.render()初始化时没设url，table.reload()就不会发请求，只会用缓存数据重绘 - 后端没收到
where参数，大概率是字段路径不匹配：前端传{ filter: { type: 'vip' } }，后端却只解析一级 keytype，得对齐约定 -
table.reload('wrongId', {})不报错也不生效——ID 错了 Layui 会静默忽略，检查table.render()时传的id和 reload 时传的是否完全一致（含大小写、引号）
容易被忽略的是：tab 切换后目标 tab-pane 还没渲染完成，table.reload() 就执行了，结果找不到容器元素。应在回调里加个简单判断：if ($(data.elem).find('#userTable').length) { table.reload(...) }。
