去掉layui table分页右侧“每页显示条数”下拉框需在page配置中设limits: []且limit为固定值,因Layui仅当limits长度≥2时渲染下拉框,长度为1仍显示不可展开的输入框,空数组才彻底隐藏DOM。
layui table 分页右侧的“每页显示条数”下拉框怎么去掉
直接在 page 配置里关掉:设置 limits 为空数组,再把 limit 设为固定值。layui 的分页组件默认显示下拉框,是因为它检测到 limits 有多个可选项;只要让它“没得选”,下拉框就自动隐藏。
常见错误是只设了 limit: 10 却没动 limits,结果下拉框还在,只是默认选中 10 —— 这不是隐藏,是假装隐藏。
-
limits: []是关键,必须显式设为空数组(不能省略,也不能设为[10]) -
limit要设成你实际想用的数值,比如limit: 20 - 如果表格启用了服务端分页(
url+parseData),这个配置依然生效
为什么 limits: [10] 还会显示下拉框
Layui 的逻辑是:只要 limits 数组长度 ≥ 2,就渲染下拉框;长度为 1 时,它仍会渲染一个“不可展开”的下拉(UI 上是个带箭头的输入框),视觉上还是存在。只有 limits: [] 才彻底跳过下拉框 DOM 渲染。
这个行为在 Layui 2.8.x 和 2.9.x 中一致,但文档没写清楚,容易踩坑。
- 别信“设一个值就行”,实测无效
- 别用
limits: null或limits: undefined,Layui 会 fallback 到默认[10,20,30,40,50] - 检查浏览器控制台是否报
Uncaught TypeError: Cannot read property 'length' of undefined—— 那说明limits没传对类型
隐藏后如何动态改每页条数(比如用户点按钮切换)
既然下拉框没了,就得手动触发重载。核心是调用 table.reload() 并传入新 limit,同时保持 limits: [] 不变。
注意:不能只改 options.limit 然后调 table.render(),那会重建整个表格实例,丢失当前页码、排序状态等。
- 用
table.reload('yourTableId', { limit: 50 })最稳妥 - 如果要保留当前页码,加上
page: { curr: 1 }或读取当前页再传入 - 避免高频点击导致重复请求:加个简单节流,比如用
setTimeout锁住 300ms
兼容性与副作用提醒
这个方案在 Layui 2.8+ 全平台可用,但有个隐藏影响:当 limits: [] 时,分页栏右侧的“共 N 条”文字会左移贴着页码,没有下拉框占位,整体更紧凑——这是预期效果,不是 bug。
如果你的 CSS 里写了类似 .layui-table-page .layui-laypage-limits 的强依赖选择器,记得同步删掉或注释,否则可能报找不到元素的警告。
最常被忽略的一点:表格初始化后,再通过 table.reload() 修改 limits 无效,Layui 不支持运行时开启/关闭下拉框。必须在首次 table.render() 时就定死 limits: []。










