直接删掉 page.layout 里的 'limit' 字符串即可彻底隐藏每页条数选择框,Layui 不会渲染该 DOM;需配合 limits: [] 并通过 table.reload() 显式传入新 page 配置,且应监听表格父容器宽度而非 window。

直接删掉 page.layout 里的 limit 就行
想让「每页条数选择框」彻底消失,不是靠 CSS 隐藏,而是从 page.layout 数组中移除 'limit' 字符串。Layui 渲染分页栏时,只按 layout 里写的项生成 DOM;没写的,压根不创建——没有元素,自然不占位、不触发聚焦、reload 也不会意外恢复。
常见写法:layout: ['count', 'prev', 'page', 'next', 'refresh'](不含 'limit')
-
'limit'被删后,下拉框 DOM 彻底不生成,比.layui-laypage-limit { display: none }干净得多 - 服务端分页逻辑不受影响:
page.limit仍生效,请求照发,只是用户不能手动改 - 如果同时删了
'count'和'refresh',它们也一样:不渲染、不绑定事件、不留白
limits 数组设为空才是真隐藏,别用 [15] 或 null
page.limits 控制下拉选项内容,但它和「是否显示下拉框」是两回事。只有 limits: [] 才真正跳过渲染;其他值都会导致 UI 异常:
-
limits: [15]→ 渲染一个带箭头但无法点击的输入框(视觉残留,还可能被误点) -
limits: null或未声明 → 回退到默认[10, 20, 30, 40, 50],完全无效 -
limits: ["10", "20"](字符串数组)→ 下拉菜单空白或选项错乱,必须是数字数组
注意:即使你设了 limits: [],只要 layout 里还有 'limit',Layui 仍会尝试渲染——所以二者要配合:删 layout 项 + 清空 limits。
响应式切换必须 table.reload() 显式传新 page 配置
不能在 resize 或 ResizeObserver 里只改 table.config.page.layout,那只是内存变量,UI 不会更新。必须调用 table.reload() 并完整传入新 page 对象:
- ✅ 正确:
table.reload('demo', { page: { layout: ['count','prev','page','next'] } }) - ❌ 错误:
table.config.page.layout = ['count','prev','page','next']; table.reload('demo');→ layout 不变 - reload 时若漏传
page,会沿用初始化配置,导致隐藏失效
如果启用了服务端分页,reload 会重新请求数据;不想重复拉,可加 page: { curr: table.config.page.curr } 保持当前页码。
监听容器宽度,不是 window
表格是否该隐藏选择框,取决于它自己所处容器的宽度,不是整个屏幕。监听 window.resize 在侧边栏展开、弹窗遮挡、地址栏收起时都会误判,造成按钮闪现或该隐藏时不隐藏。
正确做法是监听表格父容器的尺寸变化,比如用 ResizeObserver 观察 elem.parentElement 的宽度,再决定是否 reload 并切换 layout。
容易被忽略的是:Layui 2.5.x 旧版本不支持通过 layout 移除 'limit',必须升级到 2.8+ 才能生效;低版本只能靠 CSS 隐藏,但会留白、错位、reload 恢复 —— 这类兼容性坑,不实际测就很难发现。


















