el-table分页全选

### 解决Element UI `el-table` 组件分页时全选的问题

为了实现在分页情况下能够正确处理全选功能，需要通过监听特定事件并管理已选择的数据。具体来说，在多页数据场景下保持所选项的一致性和准确性至关重要。

对于HTML部分，已经定义了两个重要事件来响应用户的交互行为：

- 当选择项发生变化时触发的 `selection-change` 事件。
- 用户手动勾选全选复选框时触发的 `select-all` 事件[^1]。

#### JavaScript逻辑实现

在JavaScript端，则需维护一个全局的选择列表用于存储所有被选中的记录，并确保每次页面切换或刷新时不丢失这些信息。以下是具体的实现方式：

// 定义变量保存当前所有的选中行
let allSelectedRows = [];

export default {
    methods: {
        getRowKeys(row) { // 设置每一行唯一标识符的方法
            return row.id;
        },
        handleSelectionChange(selection) { // 单独选择某一行或多行改变后的回调函数
            this.selectedOnCurrentPage = selection;

            const selectedIds = new Set(this.allSelectedRows.map(item => item.id));
            this.data.forEach((item) => {
                if (selectedIds.has(item.id)) {
                    this.$refs.multiTable.toggleRowSelection(item, true);
                }
            });
            
            console.log('current page selections:', selection); 
        },

        cli(selection) { // 处理全选/取消全选的操作
            if (selection.length === 0) {
                // 取消全选时清空allSelectedRows数组
                allSelectedRows = [];
                
                // 同步更新视图状态
                this.data.forEach((row) => {
                    this.$refs.multiTable.clearSelection();
                });

            } else {
                // 获取全部数据源（假设this.data包含了所有不分页的数据）
                let idsOfAllPages = this.data.map(({ id }) => id);

                // 如果之前有历史选择则保留下来
                let previouslySelectedIds = new Set(allSelectedRows.map(({ id }) => id));

                // 将本次全选的结果加入到总的选定集合里去重后赋给allSelectedRows
                allSelectedRows = [...new Set([
                    ...previouslySelectedIds,
                    ...idsOfAllPages].map(id => ({ id }))
                )];

                // 更新视图显示为全选状态
                this.data.forEach((row) => {
                    this.$refs.multiTable.toggleRowSelection(row, true);
                });
            }

            console.log('all selected rows:', allSelectedRows);
        }
    }
}

此代码片段展示了如何利用 Vue 和 Element UI 的特性来应对分页情况下的全选需求。通过自定义方法 `getRowKeys()` 来指定每条记录唯一的键值；并通过 `toggleRowSelection()` 方法控制单个或多个项目的选中状态。同时，针对不同类型的用户动作分别编写相应的处理器 (`handleSelectionChange`, `cli`) ，从而实现了即使跨越多个分页也能维持一致性的全选效果。