解决element-ui + vue.js 的table组件跨页全选、多选，保持所选记录问题

起因：公司里面一个界面，因为数据量比较大，原：所有数据一次查询，用element的table组件一次性数据渲染出来，并且会涉及到相同货号行数据要合并前几列。>起因：公司里面一个界面，因为数据量比较大，原：所有数据一次查询，用element的table组件一次性数据渲染出来，并且会涉及到相同货号行数据要合并前几列。

问题BUG: 发现因为数据太多导致界面时而渲染卡死。

解决过程：做了前端分页，但是分页之后前端的多选就只能选中当前页面的数据了，而且要求其它页面选过的数据需要记录被勾选的状态，这样再翻页回去就可保留勾选状态。
(看到好像有reserve-selection 这个属性可以保留勾选状态，但是我自己没试出来；网上的教程和gpt的方案yong’zhe都不太顺利）
这个问题比较着急修复，于是我自己xian写了以下逻辑：

1. 首先要求给table组件绑定全选事件和单独选中的事件：

   <el-table
   id="detail-config"
   ref="detailTable"
   border stripe
   @select="handleSelectRow" @select-all="handleSelectAll">
   </el-table>

2. 定义几个变量用来存储多选和当前页所选的数据和状态：

   multipleSelection: [], // 当前页选中的数据
   selectedRowsMap: {}, // 所有选中的数据按页码分组
   isAllSelected: false, // 判断是否全选

3. 分页之后应恢复被选中的行的状态

   // 下一页的逻辑
   handlePageChange(newPage) {
    this.frontPageConfig.currentPage = newPage
    this.paginateData()
    this.$nextTick(() => {
        if (this.isAllSelected) {
            this.$refs.detailTable.toggleAllSelection()
        } else {
            if (this.selectedRowsMap
            && this.selectedRowsMap[this.frontPageConfig.currentPage] !== undefined
            && this.selectedRowsMap[this.frontPageConfig.currentPage] !== null
            && this.selectedRowsMap[this.frontPageConfig.currentPage].length > 0) {
                this.selectedRowsMap[this.frontPageConfig.currentPage].forEach(row => {
                    this.$refs.detailTable.toggleRowSelection(row, true)
                })
            }
        }
    })
   },

4. 触发了全选复选框或者单个行的复选框

   /** 跨页勾选操作 start **/
   // 处理全选事件
   handleSelectAll(rows) {
    if (rows.length > 0) {
        // 用户点击全选，选中所有数据
        this.multipleSelection = this.tableConfig.dataset.filter(row => {
            if (row.specCode === '合计') return row
        })
        this.isAllSelected = true
    } else {
        // 用户取消全选，清空选中数据
        this.multipleSelection = []
        this.$refs.detailTable.clearSelection()
        this.isAllSelected = false
    }
    if (this.isAllSelected) {
        this.selectedRowsMap = {} // 先清空选中的数据
        for (let page = 1; page <= Math.ceil(this.totalPages / this.frontPageConfig.pageSize); page++) {
            const start = (page - 1) * this.frontPageConfig.pageSize
            const end = start + this.frontPageConfig.pageSize
            // 取 multipleSelection 里当前页的数据
            this.selectedRowsMap[page] = this.multipleSelection.slice(start, end).filter(row => {
                return this.isRowSelectable(row)
            })
        }
    } else {
        this.selectedRowsMap = {}
    }
   },
   // 选中了某几行
   handleSelectRow(rows) {
    this.isAllSelected = false
    this.multipleSelection = rows.filter(row => {
    if (row.specCode === "合计") return row
    })
    this.selectedRowsMap[this.frontPageConfig.currentPage] = this.multipleSelection
   },
   /** 跨页勾选操作 end **/

本作品采用《CC 协议》，转载必须注明作者和本文链接