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