本方案仅供快捷实现数据的翻页多选，不支持翻页多选数据的反显，若想支持翻页多选数据的反显，请参考全能版
Element UI 多选表格【翻页多选】全能版（含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案）_朝阳39的博客-CSDN博客
https://blog.csdn.net/weixin_41192489/article/details/125995891
效果预览
实现原理
- 给 el-table 添加
:row-key="getRowKeys"，官网解释如下：
// 优化表格渲染 getRowKeys(row) { return row[this.UID]; },
UID 为 data() 中定义的唯一标识符，
// 唯一标识符 UID: "ID",
- 在多选列上添加
:reserve-selection="true"，官网解释如下：
<el-table-column type="selection" width="55" align="center" :reserve-selection="true" > </el-table-column>
- 通过 selection-change 事件，获取所有选中行，官网解释如下：
// 获取所有选中的数据 selectionChange(selectedRows) { this.selectedList = selectedRows; },
完整范例代码
<template> <div class="mainBox"> <h3>已选择：</h3> <el-tag :key="item[UID]" v-for="item in selectedList"> {{ item.name }} </el-tag> <el-table v-loading="loading" ref="multipleTable" :data="tableData" :row-key="getRowKeys" @selection-change="selectionChange" > <el-table-column type="selection" width="55" align="center" :reserve-selection="true" > </el-table-column> <el-table-column prop="ID" label="编号" align="center"> </el-table-column> <el-table-column prop="name" label="姓名" align="center"> </el-table-column> <el-table-column prop="age" label="年龄" align="center"> </el-table-column> </el-table> <el-row type="flex" class="pageBanner" justify="center"> <el-pagination background :total="total" :page-size="pageSize" @size-change="pageSizeChange" @current-change="currentPageChange" :current-page="currentPage" :page-sizes="[1, 2, 3]" layout="total, sizes, prev, pager, next, jumper" > </el-pagination> </el-row> </div> </template> <script> export default { data() { return { // 唯一标识符 UID: "ID", loading: false, total: 0, pageSize: 3, currentPage: 1, selectedList: [], tableData: [], }; }, mounted() { // 页面初始化时，首次加载数据 this.getData(this.currentPage, this.pageSize); }, methods: { // 优化表格渲染 getRowKeys(row) { return row[this.UID]; }, // 获取所有选中的数据 selectionChange(selectedRows) { this.selectedList = selectedRows; }, // 切换每页显示条数 pageSizeChange(newPageSize) { this.pageSize = newPageSize; this.getData(this.currentPage, this.pageSize); }, // 切换页码--翻页 currentPageChange(newPage) { this.currentPage = newPage; this.getData(this.currentPage, this.pageSize); }, // 模拟访问接口获取数据 getData(page, pageSize) { this.loading = true; setTimeout(() => { let data = [ { ID: 1, name: "王小虎", age: 10, }, { ID: 2, name: "张三", age: 20, }, { ID: 3, name: "李四", age: 30, }, { ID: 4, name: "何香", age: 18, }, { ID: 5, name: "刘刀", age: 27, }, { ID: 6, name: "关胜", age: 33, }, { ID: 7, name: "齐巧", age: 55, }, { ID: 8, name: "卢一方", age: 45, }, { ID: 9, name: "王兴海", age: 66, }, { ID: 10, name: "全德", age: 100, }, ]; this.total = data.length; let startIndex = pageSize * (page - 1); let endIndex = pageSize * page; this.tableData = data.slice(startIndex, endIndex); this.loading = false; }, 1000); }, }, }; </script> <style scoped> .mainBox { margin: 30px; } .el-tag { margin: 10px; } .pageBanner { margin: 10px; } </style>
