page.limits必须是长度≥2的纯数字数组,如[10,20,50];page.limit必须是limits中的有效值,否则静默回退至首项;动态改limits需destroy+render,reload无效;移动端limits建议≤4项。

page.limits 必须是数字数组,且长度 ≥ 2
下拉菜单是否出现、能选几个值,全看 page.limits。它必须是纯数字数组,比如 [10, 20, 50],不能是字符串数组(如 ["10", "20"])、null、undefined,也不能只写一个数(如 [15])。[15] 会渲染一个带箭头但点不开的输入框,视觉上残留,实际不可用;只有 limits: [] 才真正隐藏下拉。
常见错误现象:配了 limits: ["10", "20", "50"],结果下拉还是默认的 [10, 20, 30, 40, 50]——Layui 只认数字,遇到字符串直接忽略整个数组,fallback 到内置默认值。
limit 值必须在 limits 数组中存在
page.limit 决定“当前选中哪一项”,但它不是独立配置项,而是一个“必须命中 limits 的校验值”。比如你设了 limits: [8, 16, 32],却写 limit: 15,Layui 不报错,但初始化时静默 fallback 到 8,且下拉菜单无法回显当前值,页码文案可能显示异常(如“第 1 页(共 0 页)”)。
实操建议:
- 始终让
limit和limits同时出现在page对象里,别用page: true简写 - 首次渲染前确认
limit是limits中的某一个元素,例如{ limit: 20, limits: [10, 20, 50] } - 后端接口若不接收
limit字段(比如叫pageSize),必须同步配request: { limitName: 'pageSize' },否则前端选了 50,请求发出去的仍是limit=50,后端收不到
动态改 limits 只能 destroy + render,reload 无效
表格渲染完成后,想换掉下拉选项(比如从 [10, 20, 50] 改成 [5, 15, 30]),调 table.reload() 传新 limits 完全没用——DOM 不更新、内部状态不同步、点新选项可能发旧值或无响应。
正确做法是销毁重建:
- 先调
table.destroy('demo'),参数必须是表格容器的id或lay-id,否则销毁失败,后续 render 会报“重复渲染” - 清空容器内非表格 DOM(如自定义按钮、提示文字),避免样式干扰
- 用完整新配置重新
table.render(),包括cols、url、request、page等关键项,漏一项就变空白 - 原表格若有排序、搜索状态,需手动保存并在新 render 中还原
移动端 limits 别超过 4 个,小屏下拉容易被截断
在手机或小屏设备上,limits 超过 4 个(如 [5, 10, 15, 20, 30, 50])会导致下拉弹层超出视口,最末几项用户根本点不到。这不是 CSS 能硬撑解决的——.layui-laypage-limits 是固定高度,强行改样式易破坏整体布局,也解决不了溢出问题。
实测稳定组合是 [10, 20, 50] 或 [10, 20, 50, 100]。大数值(如 1000)适合导出场景,不该混进常规分页下拉里,既无必要又影响体验。











