Layui表格如何监听窗口大小改变并自动重绘

Layui table 需手动监听 window.resize 并调用 table.reload() 重绘，配合防抖；禁用 layui.resize()，不可仅改 DOM 宽度；推荐动态传 width、cols、height；移动端需补充 orientationchange 等兜底监听。

layui table 如何响应 window resize 事件

layui 的 table.render() 默认不监听窗口缩放，表格宽度不会自动适配。必须手动绑定 window.onresize 并调用重绘方法，否则在浏览器缩放、分屏或切换横竖屏时，表格会出现横向滚动条错位、列宽塌陷或内容截断。

实操建议：

• 不要用 layui.resize() —— 这是 Layui 内部事件总线，仅用于模块间通信，**不触发表格重绘**
• 必须调用 table.reload()，且只传入需要更新的配置项（如 width、cols），避免重复初始化整个表格
• 加防抖：频繁 resize 可能导致重绘卡顿，建议用 setTimeout 延迟 150ms 执行

let resizeTimer;window.addEventListener('resize', () => {  clearTimeout(resizeTimer);  resizeTimer = setTimeout(() => {    table.reload('yourTableId', {      width: $('#yourTableContainer').width(),      // 其他需动态更新的参数，如 cols 中的固定宽度可在此重新计算    });  }, 150);});

为什么不能直接改 table.elem.style.width

单纯修改 DOM 宽度不会触发 Layui 表格内部的列宽计算逻辑，table 实例的 cols 缓存、fixed 列对齐、scrollbar 宽度补偿等都依赖 reload 流程。硬改样式只会让表头和表格体错位，尤其在启用了 fixed 列或 height 限制时更明显。

常见错误现象：

• 表头列宽正常，但 tbody 列宽没变，出现错位
• 右侧出现多余空白或滚动条突然消失
• 启用 height: 'full-xx' 时，高度计算失效，表格被截断

table.reload() 中哪些参数影响重绘效果

不是所有参数都适合在 resize 时传入：elem、url、data 等初始化级配置重复传入会引发请求重发或数据重载，纯属干扰。真正需要动态更新的只有布局相关项。

推荐传入的参数：

• width：设为容器实际宽度（如 $('#tableWrap').width()），避免用 'auto' 或 '100%' —— Layui 对百分比支持不稳定
• cols：如果列宽依赖屏幕尺寸（比如某些列设为 width: $(window).width() > 768 ? 200 : 120），需在此重新生成 cols 数组
• height：若使用 'full-xx'，需重新计算，例如 height: $(window).height() - 120

不建议传入：page、where、method、done —— 除非你明确需要重触发分页或回调。

移动端横竖屏切换时的兼容性注意点

iOS Safari 和部分安卓 WebView 对 resize 事件触发不敏感，尤其是从横屏切回竖屏时可能不触发。单纯监听 window.onresize 不够可靠。

补充方案：

• 监听 orientationchange 事件（iOS 仍支持，安卓多数也兼容）
• 在 visibilitychange 里检查是否从后台切回，再做一次 table.reload()
• 对关键容器加 ResizeObserver（现代浏览器），但 Layui 2.8+ 未内置支持，需自行封装

最简兜底写法：

window.addEventListener('orientationchange', () => {  setTimeout(() => {    table.reload('yourTableId', { width: $('#tableWrap').width() });  }, 100);});

重绘本身不复杂，难的是判断什么时候该重、重多少、以及不同终端下事件是否真的发生了。别迷信一次绑定就万事大吉，移动端要多埋一层兜底。