跨页全选需启用分页且手动管理已选ID集合;table.checkAll仅作用于当前页,无法实现真正跨页选择。
table.render 里没开 page 就别谈跨页全选
跨页全选本质是“选中当前页所有行 + 记住其他页的选中状态”,前提是表格启用了分页。如果 page: false 或压根没传 page 配置,table.checkstatus 拿到的永远只是当前页数据,所谓“跨页”根本不存在。
实操建议:
- 确认
table.render中page是true或带配置对象(如{ layout: ['count', 'prev', 'page', 'next'] }) - 服务端接口必须支持
page和limit参数,并返回总条数(count字段),否则 Layui 无法计算总页数 - 如果用的是本地数据(
data数组而非url),Layui 默认不启用分页逻辑,跨页全选无意义
用 table.setRowChecked 批量操作前先清空已选状态
Layui 2.8 新增了 table.setRowChecked,但它不会自动清除之前的手动勾选或上一页遗留状态,直接调用会导致重复选中、状态错乱。
常见错误现象:点一次“全选”好像生效,再翻页再点,新页行被选中但旧页仍显示勾选,table.checkStatus 返回的数据却漏掉部分 ID。
实操建议:
- 跨页全选不是“勾选当前页”,而是“标记所有数据为已选”——需配合全局变量记录已选 ID 集合
- 每次触发全选前,先调用
table.clearCache('yourTableId')清除缓存(尤其在多表共用同一 ID 时) - 不要依赖
table.checkStatus的data字段反推全选范围,它只返回当前页可见行
一行代码实现的关键:监听 toolbar 并调用 table.cache
所谓“一行代码”是指在 toolbar 工具栏按钮点击事件里,用单条语句完成全选逻辑,但前提是已有预设状态管理。Layui 不提供开箱即用的跨页全选 API,必须自己维护已选 ID 列表。
使用场景:你有一个“全选”按钮放在 toolbar 区域,点击后让所有页的数据都进入选中态。
实操建议:
- 初始化时定义全局变量
window.selectedIds = new Set() - 在
toolbar对应的event回调里写这行核心代码:layui.table.cache['yourTableId'].forEach(item => window.selectedIds.add(item.id));
-
table.cache是 Layui 内部缓存的全部原始数据(不分页),但仅当url接口返回了完整数据集才可靠;若后端做了真分页(只返当前页),这行代码无效 - 记得后续通过
table.reload重绘 checkbox 状态,或手动遍历tr元素加layui-form-checked类
为什么不能只靠 table.checkAll?
table.checkAll 只作用于当前页渲染出的 tr 行,它不触碰缓存、不修改数据源、也不影响其他页。这是最常被误解的一点——很多人以为它叫“checkAll”就真是全量选择。
性能与兼容性影响:
- 在万级数据分页场景下,反复调用
table.checkAll(true)+table.checkAll(false)会引发明显卡顿,因为每页都要 DOM 遍历 - Layui 2.8.19 之前版本存在
checkAll在异步 reload 后失效的问题,升级不能解决根本逻辑缺陷 - 如果你的表格开启了
skin: 'row'或自定义cols中有type: 'checkbox'以外的类型,checkAll可能静默失败
真正可靠的跨页全选,绕不开自己管 ID、自己比对、自己同步 UI。Layui 提供的是零件,不是整车。

















