el-table跨页多选

### 解决方案概述 为了实现 `el-table` 组件的跨页多选功能，需综合运用多种技术手段确保用户体验流畅并保持数据一致性。具体来说，在处理分页和选择逻辑时要特别注意状态管理[^3]。 ### 技术细节说明 #### 数据存储设计 由于页面切换会刷新显示的数据集，因此需要额外维护一个全局的选择记录对象用于保存各条目是否被选中的状态。此对象通常以键值对形式存在，其中键为目标项目的唯一标识符（如ID），而值则表示其是否处于选定状态。 #### 页面交互逻辑 当用户点击全选按钮时，不仅要更新当前视图内的所有行的状态，还需同步修改上述提到的选择记录对象内对应位置的信息；反之亦然——即单独勾选某一行也会触发相应变化传播至整个应用层面[^1]。 #### 表格渲染优化 考虑到性能因素，在实际开发过程中可以考虑仅加载必要部分而非一次性获取全部列表项。对于已超出可视区域的内容，则可通过懒加载等方式延迟初始化直至真正访问到为止[^5]。 ```html <template> <div class="app-container"> <!-- 工具栏 --> <el-button @click="toggleSelectAll">Toggle Select All</el-button> <!-- 表格主体 --> <el-table :data="paginatedData" ref="multipleTableRef" row-key="id" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection"/> ... </el-table> <!-- 分页控件 --> <el-pagination background layout="prev, pager, next" :total="totalCount" v-model:current-page="currentPage" @size-change="handleSizeChange" @current-change="fetchPageData"></el-pagination> </div> </template> ``` ```javascript <script setup lang="ts"> import { reactive } from "vue"; // 假设这是从服务器端获得的数据源 const allItems = [ /* ... */ ]; let selectionMap = new Map(); // 存储每一页已被选中的 ID 集合 let currentPage = $ref(1); let totalCount = computed(() => allItems.length); function fetchPageData(pageNum) { const startIdx = (pageNum - 1) * pageSize; paginatedData.value = allItems.slice(startIdx, startIdx + pageSize).map(item => ({ ...item, selected: selectionMap.has(item.id), })); } watch(currentPage, () => { updateSelectedRows(); }); function handleSelectionChange(selections) { selections.forEach(({ id }) => selectionMap.set(id)); } </script> ```