table.reload()非万能:会重置分页、清空选中、丢失滚动;需显式传page.curr保留页码;追加数据应操作table.cache+table.reloadData();尺寸变化用table.resize();加载失败须清缓存、清空DOM、重render。

table.reload() 是动态重载的默认入口,但不是万能钥匙
它能触发接口请求、刷新数据、重绘表格,但会重置分页到第 1 页、清空选中状态、丢失滚动位置——如果你只是改了搜索条件或切换 Tab,却没传 page: { curr: x },用户刚看的第 5 页就没了。
常见错误是只写 where: { status: 1 } 就调用 table.reload('userTable', { where: { status: 1 } }),结果页面闪一下回到首页。必须显式保留当前页码:
- 先拿到实例:
const tableIns = table.get('userTable') - 再 reload:
table.reload('userTable', { where: { status: 1 }, page: { curr: tableIns.config.page.curr } }) - 后端接收字段要对齐:如果后端期望参数是
filter[status],前端就得写where: { filter: { status: 1 } },不能硬套 key 名
想追加一行新数据?别用 reload,改 table.cache + table.reloadData()
table.reload() 每次都重建整个 DOM,不可能“只加一行”。真正轻量的做法是操作缓存再局部刷新:
-
table.cache是以表格id为 key 的对象,值是当前页原始数据数组(不是响应式,得手动 push) - 确认缓存存在且是数组:
if (Array.isArray(table.cache['userTable'])) { ... } - push 新行前,确保字段名和列定义
field完全一致,比如列是{ field: 'user_name' },新对象就得有user_name字段,不能写username - 最后调
table.reloadData('userTable'),不是reload()—— 后者会丢掉所有上下文
容器尺寸变了,别 reload,用 table.resize()
侧边栏折叠、弹窗展开、Tab 切换导致表格宽度/高度变化时,table.reload() 是过度操作:它会发请求、重置分页、清空选中项。而 table.resize('userTable') 只重算列宽、同步 fixed 列高度、保持当前页码和排序状态。
注意两个限制:
- 它对固定高度(如
height: 400)无效,只适配height: 'full-120'或未设 height 的场景 - 移动端横竖屏切换不触发
window.onresize,得额外监听orientationchange事件 - 高频 resize 会导致卡顿,必须加防抖:
setTimeout+clearTimeout延迟 150ms 执行
加载失败后显示“点击重新加载”,不能只靠 error 回调
error 回调只告诉你请求失败了,但表格 DOM 还挂着 loading 状态或半截表头,用户没法点任何东西。必须手动清理现场:
- 调
table.clearCache('userTable')(Layui 2.8+ 必须传 id,否则无效) - 清空容器:
$('#userTable').empty(),否则按钮会叠在旧表头上 - 插入按钮并绑定完整
table.render()配置(不是reload()),因为后者不重传url和cols,容易漏参数 - 如果表格设了
height,清空后记得$('#userTable').css('height', 'auto'),不然按钮可能被撑出视口
最易忽略的是:动态表头(比如列由后端返回)无法用 reload() 更新,只能删 DOM + 重新 table.render(),因为 reload() 不处理 cols 变更。


















