Layui分页表格中checkbox翻页“失忆”是因为其不维护全局选中状态，需用外部数组selectedIds手动记录ID；勾选时增删ID，导出时通过前端缓存或后端批量查询获取完整数据。
为什么 checkbox 在 Layui 分页表格里一翻页就“失忆”
用过 Layui 表格做批量操作的朋友，大概率都踩过这个坑：明明在第一页勾选了几条数据，一翻到第二页，刚才的勾选全没了。这其实不是程序出了 Bug，而是 Layui 表格本身的设计机制就是如此。
无论是前端分页还是服务端分页，table.render() 渲染的表格，其复选框的选中状态都只“活”在当前页的 DOM 结构里。一旦翻页，新的页面会重新渲染，旧的 DOM 节点被销毁，自然也就找不到之前的勾选记录了。所以，你用 table.checkStatus('id') 这个方法，永远只能拿到当前页的选中数据，跨页的数据它一概不知。
- 服务端分页：情况最直接，每一页数据都是独立从后端请求回来的，DOM 完全重建，之前的
checkbox节点自然就消失了。 - 前端分页：虽然所有数据都在本地，但 Layui 并不会自动将你勾选的状态同步回原始的数据源对象里。
- 核心结论：Layui 表格本身并不维护一个全局的选中状态池，这就是问题的根源。
用 data 数组手动维护选中 ID 列表
既然框架不帮我们记，那我们就自己记。最核心的思路就是：抛弃对 DOM 状态的依赖，转而用一个外部的 Ja vaScript 数组（比如叫 selectedIds）来记录用户所有勾选过的行的唯一标识（通常是数据里的 id 字段）。
具体操作分几步走：
- 首先，确保你的表格数据里有一个唯一字段（比如
id），并在列配置中设置type: 'checkbox'。 - 接着，监听表格的复选框事件
table.on('checkbox(filterId)', ...)。在回调函数里，你能拿到当前操作行的数据对象obj.data以及是选中还是取消的状态obj.checked。 - 然后，就是对这个
selectedIds数组进行增删操作。这里有个细节要注意去重，因为同一行可能被反复勾选、取消。 - 最后，如果数据是服务端分页，意味着前端没有所有数据的完整详情。那么在最终导出时，你需要把收集好的
selectedIds数组传给后端，让后端一次性查询出这些 ID 对应的完整数据，这能有效避免 N+1 查询的性能问题。
let selectedIds = [];
table.on('checkbox(test)', function(obj){
const id = obj.data.id;
if(obj.checked){
if(!selectedIds.includes(id)) selectedIds.push(id);
} else {
const i = selectedIds.indexOf(id);
if(i > -1) selectedIds.splice(i, 1);
}
});
导出时怎么拿到跨页的完整行数据
状态记录好了，怎么把数据拿出来用呢？关键点在于：别再指望 table.checkStatus() 了。你需要根据 selectedIds 自己去组织完整的数据。通常有两条技术路径可选：
- 前端全量缓存：在表格初始化前，就把后端返回的所有数据（或者首次加载的全部数据）存到一个全局的 Map 对象里，Key 是
id，Value 是整行数据。导出时，直接遍历selectedIds从 Map 里取数据拼装。这种方法省去了后续的请求，但比较消耗客户端内存，适合数据量不大的场景。 - 后端按 ID 拉取：这是更通用和稳妥的做法。在点击导出时，发起一个请求，将
selectedIds数组传给后端。后端使用WHERE id IN (...)这样的 SQL 语句一次性查询，并生成 Excel 或 CSV 文件流返回。这种方式尤其适合数据量大、字段多的场景。 - 别忘了边界处理：导出按钮一定要加上判断，如果
selectedIds.length为 0，就提示用户“请先选择数据”，否则点了也没反应，体验不好。 - 性能小贴士：如果选中的 ID 数量非常大（比如上千），直接拼成超长的 SQL IN 子句可能会让数据库压力山大。这时候可以考虑分批次查询，或者让后端采用临时表的方式来优化。
容易被忽略的细节：全选按钮和反选逻辑要同步处理
上面的方案处理了每一行的勾选，但表格头部那个“全选/反选”的 checkbox 呢？很多人就在这里栽了跟头。点击表头的全选框，并不会触发我们上面监听的 table.on('checkbox') 事件。
你需要额外处理它：
- 监听全选：可以通过监听
table.on('tool(test)')事件，或者直接给表头的复选框绑定 click 事件。当全选触发时，遍历当前页的所有data，把它们的id全部加入selectedIds数组（注意去重）。 - 取消全选：同理，取消全选时，需要将当前页所有数据的
id从selectedIds中移除，而不是清空整个数组（因为其他页可能还有选中的）。 - 处理反选：反选的逻辑稍微复杂点。你需要先找出当前页未被选中的行的 ID，加入数组；再把当前页已被选中的行的 ID，从数组中剔除。
- 状态同步：还有一个容易出问题的地方：当你进行搜索、筛选或者表格重载后，表头的全选框的选中状态不会自动更新。记得在表格重载后，手动将其设置为未选中状态，否则会给用户造成误解。
