Layui 2.8+ 表格全屏需用 layui.fullscreen.toggle() 配合 toolbar 按钮,监听 tool 事件和 fullscreenchange,调用 table.resize()(建议 setTimeout 延迟 16ms),height 设为 auto 或动态重置,低版本需手写 requestFullscreen 兼容逻辑。
layui table 的全屏切换按钮怎么加
直接在表格工具栏里加个按钮,用 layui.fullscreen api 控制浏览器原生全屏,不是靠 css 拉伸容器。layui 2.8+ 内置了 layui.fullscreen,低版本得自己调 document.documentelement.requestfullscreen() 兼容写法。
常见错误是只改表格容器高度、隐藏头部——这不算真全屏,F11 退出后布局错乱,打印/截图也不对。
- 按钮加在
toolbar配置里,类型设为button,event绑定自定义事件名(比如toggleFullscreen) - 在
table.on('tool(你的tableId)', ...)里监听该事件,调用layui.fullscreen.toggle() - 务必监听
fullscreenchange全局事件,在退出全屏时重载表格或重置列宽,否则列宽可能异常
全屏后表格内容被截断或错位怎么办
因为全屏后视口尺寸突变,但 layui.table 默认不会自动响应式重绘,尤其带固定列、冻结列或自定义 cellMinWidth 的场景。
核心动作是:全屏状态切换后,必须手动触发 table.resize(),且建议加 setTimeout 延迟 16ms(等 DOM 重排完成)。
- 不要只调
table.reload(),它会重新请求数据,体验卡顿 - 如果用了
fixed: true的列,resize()后还需补一句table.getScrollWidth()触发内部滚动计算 - 某些老项目用了自定义 CSS 强制设死
.layui-table宽高,全屏时得用!important覆盖,或改用max-width: 100vw这类相对单位
layui.fullscreen.toggle() 报错 “is not a function”
说明你用的是 Layui 2.7 或更早版本,layui.fullscreen 是 2.8 新增模块,没加载就调用会报这个错。
兼容方案只有两个:升级 Layui,或手写原生全屏 API。别去网上搜“layui 全屏插件”,多数是 patch 代码,维护性差还容易和后续版本冲突。
- 检查
layui.cache.version或控制台输出layui.version确认版本 - 若不能升级,用
document.documentElement.requestFullscreen?.()+document.exitFullscreen?.()封装,注意加webkit/moz前缀判断 - 调用前必须确保当前上下文是用户手势触发(如 click),否则 Chrome 会静默拒绝,不报错但也不生效
退出全屏后表格高度没恢复,或者工具栏消失
这是最常被忽略的点:全屏只是切换了浏览器视口,但 Layui 表格初始化时记录的容器高度(height 配置值)没变,导致退出后仍按全屏时的高度渲染。
解决方案不是“记住原始高度再设回去”,而是让表格始终基于容器自动撑开——把 height 设为 'auto' 或完全不设,靠 limit 和 page 控制分页逻辑;如果必须固定高度,就在 fullscreenchange 回调里根据 document.fullscreenElement 判断状态,动态 setOption。
- 监听
document.onfullscreenchange,别用onwebkitfullscreenchange等旧事件,现代浏览器统一用前者 - 退出全屏后,延迟执行
table.resize()+table.reload({ height: 原始值 }),原始值建议存到 table 实例的config属性里 - 工具栏消失通常是 CSS 被全屏样式覆盖,检查是否有
.layui-table-tool:fullscreen { display: none }这类误写

















