table.resize()是唯一正确触发尺寸重绘的方法,它只重算列宽和高度,不丢页码、排序、选中行,不重载数据或事件;需手动监听resize/visibility变化并加150ms防抖,且必须在表格初始化完成后调用。

table.resize() 是唯一正确触发尺寸重绘的方法
直接改 elem.style.width 或 CSS 类名,表格表头和 tbody 会错位;用 table.reload() 会丢页码、排序、选中行,还可能重复请求接口。只有 table.resize('id') 是专为尺寸变化设计的——它只重算列宽和高度,不碰数据、不分页、不重绑事件。
必须手动监听 resize 并加防抖
浏览器拖拽窗口边缘时,resize 事件每秒触发几十次,不节流会导致卡顿甚至渲染错乱。Layui 没有内置防抖,得自己加:
- 用
setTimeout+clearTimeout实现简单防抖,延迟 150ms 执行最稳妥 - 不要引入
lodash.debounce等第三方库——Layui 环境下易冲突 - 移动端必须额外监听
orientationchange,横竖屏切换不触发resize
示例:
let resizeTimer;
$(window).on('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => table.resize('demo'), 150);
});
window.addEventListener('orientationchange', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => table.resize('demo'), 150);
});
height 不是总能被 resize() 更新
table.resize() 对高度的支持有明确限制:
- 当
height配置为'full-xx'(如'full-120')或未设置时,它会根据容器新高度重算表格区域 - 若
height: 400是固定数值,该方法完全不会改变表格高度 - 要支持动态高度,要么改用
height: 'full-xxx',要么在reload()中传入函数式 height(Layui 2.9.1+)
Tab 切换、侧边栏折叠等隐藏/显示场景怎么处理
这类操作会让容器宽度短暂变为 0,导致表格初始化后列宽计算异常。不能等它“自己恢复”,必须显式调用 table.resize():
- Tab 切换:监听
tabs.on('afterChange(filter)'),在目标 Tab 显示后立即调用table.resize('id') - 侧边栏折叠:折叠动画结束(可用
transitionend)后再调用table.resize('id') - 弹窗打开:确保弹窗 DOM 已插入且可见,再调用
table.resize('id')
注意:所有调用都必须在 table.render() 完成、实例创建之后进行,否则找不到对应表格 ID。
容易被忽略的一点是 fixed 列——resize 后左右固定列的行高可能不同步,尤其在 Layui 2.8+ 中,需在 done 回调里手动调用内部方法 that.setFixedHeight(),但这不是公开 API,稳定性无保障,建议优先规避 fixed 列在频繁尺寸变更场景下的使用。


















