说实话，跨页多选这个功Neng，咱就是说hen多场景下dou用得上，尤其是在处理大量数据的时候。

你得明白，跨页多选的本质，是在 UI 事件与业务状态之间划清边界。

举个例子，当你用 Element UI 的表格组件时selection-change 事件不只是用户点了勾选框，还可Neng是数据刷新、分页切换、程序回显的副作用。

你可Neng会问，为什么百度不收录我的文章？哈哈，这个问题啊，原因hen多，比如你的网站权重不够，或者你的内容不够优质。

言归正传，回到跨页多选的实现。

坑一：selection-change 不只来自用户点击。

现象是Yi选数量突然变少。例如从 100 条变成 50 条。

治理：selectionSyncing 锁机制。

handleSelectionChange { if return; // ... }

咱就是说你得区分这两类事件，是跨页多选Neng否稳定运行的分水岭。

// 跨页多选锁：程序化回显勾选时el-table 仍会触发 selection-change； // 此期间忽略该事件，避免误改 selectedIds。 selectionSyncing: false,

技术洞见在 Element UI 表格里UI 状态与业务状态一旦分离，selection-change 就不再只是「用户点了勾选框」——它也可Neng是数据刷新、分页切换、程序回显的副作用。

sequenceDiagram participant User as 用户/程序 participant Handler as handleSelectionChange participant State as selectedIds // ...

现象 仅在 restoreSelection 内加锁，翻页时偶现Yi选数量减少。

handlePageChange { this.selectionSyncing = true; this.currentView.pagination.pageIndex = page; this.queueSelectionRestore; }

. 为什么百度不收录我的文章呢?

. 答案hen简单,你的网站权重太低,或者你的内容不够优质,你需要提高网站权重和内容质量.

. Zui终效果：本地 Chrome 实测，弹窗可交互时间从 ~6s 降至 ~0.2s。

// 冻结后 Vue 不建立深度 Observer，避免 defineProperty 风暴 this.list = Object.freeze);

. Zui终结合找到的资料加自己的一些想法,实现了跨页多选.

restoreSelection { const table = this.$refs.table; if { this.selectionSyncing = false; return; } // ... }

你kan，这样一搞，是不是就实现了十万级列表的跨页多选了？害，不容易啊！

适用于一切「海量选项 + 弹窗多选 + 跨页保留」场景，可归纳为三件套： 双视图需隔离状态——views.all 与 views.selected 各维护 searchText 、 searchKeyword 、 pagination ，避免共用一个列表硬切 filter 导致搜索词、页码互相污染。 Zui终的效果是：本地 Chrome 实测，弹窗可交互时间从 ~6s 降至 ~.2s 。 单靠 restoreSelection内部的锁不够：入口改完分页后,restoreSelection在 $nextTick才执行,中间窗口里 datageng新触发的 selection-change锁还没打开。 因此采用:全量列表一次拉取 + 前端过滤分页,用完整数据Zuo id → 行对象的映射；Yi选视图通过 selectedIds投影,保证每条Yi选项dou有可读展示。 第一版只有「全部」列表,没有「Yi选」视图。Yi勾选项分散在多页中,复核时只Neng在全量列表里逐页翻找,找一项Yi选项的成本hen高 。 增加「Yi选」视图:selectedIds投影为 selectedList,独立搜索与分页。取消勾选后列表即时收缩,复核成本从逐页翻找降为单列表浏览。 行吧,就这样了,你kan懂了吗?