el-table翻页记录勾选，正常记录取消勾选，不受翻页影响

注意：本帖为公开技术贴，不得用做任何商业用途

使用版本为vue2版本，vue3版本同理，请注意写法变更

本table在dialog中使用，会存在一个open方法作为打开dialog时的数据传输

<template>
    <el-dialog title="xxxx选择" width="1200px" :visible.sync="value.flag" :before-close="handleClose" @open="handleOpen">
        <el-table :data="tableData" ref="multiTable" style="width: 100%" max-height="450" highlight-current-row border
            @select="handleSelectionChange" @row-click="handleRowClick" :row-key="getRowKeys">
            <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
            <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
            <el-table-column label="ID" prop="pointId" width="80" align="center"></el-table-column>
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="类型" prop="type" align="center"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="th-pagination">
            <el-pagination @size-change="sizeChange" @current-change="pageChange" :current-page="paging.page"
                :page-size="paging.size" :total="paging.total"
                layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close" size="mini">取 消</el-button>
            <el-button type="primary" @click="submit" size="mini">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>

export default {
    name: '',
    data() {
            // 表格数据
            tableData: [],
            // 当前页勾选项
            tableCheckedData: [],
            // 分页
            paging: {
                page: 1,
                size: 10,
                total: 0
            },
            // 传入的勾选项
            selectedArray: [],
        }
    },
    mounted() {
	    // 获取tableData数据，自己写
	    // 如果是弹窗，可以不用再mounted钩子中写，
	    // 写在开启dialog时调用的方法中即可
        // this.init()
    },
    methods: {
        // 初始化
        init() {
            this.getData();
        },
        async getData(data) {
        	// 初始化表格数据tableData
			this.tableData= []//按照自己的接口获得，在此不做演示
        },
       
        // 显示多少条发生改变
        // pageSize，改变时调用
        sizeChange(val) {
	        // 记录
            const selectedArr = this.$refs.multiTable.selection.map(v => { return v.pointId })
            // 数组去重
			this.selectedArray = Array.from(new Set(this.selectedArray.concat(selectedArr)))
            this.paging.size = val;
            this.handleOpen()
        },
        // 页数发生变化
        pageChange(val) {
            // 获取当前页选中
            const selectedArr = this.$refs.multiTable.selection.map(v => { return v.pointId })
            // 数组去重
            this.selectedArray = Array.from(new Set(this.selectedArray.concat(selectedArr)))
            this.paging.page = val;
            this.handleOpen()
        },
        //记录分页勾选时，必要配置，具体请看文档
        getRowKeys(row) {
            return row.pointId;
        },
        /*
        *
        *这里是重点，处理反复勾选，
        *正选，反选，勾选状态矫正，
        */
        handleSelectionChange(list, item) {
	        // list，当前页所有选中项，
	        // item，点击的row对象
            this.tableCheckedData = list
            if (this.selectedArray && this.selectedArray.length > 0) {
                for (let i = 0; i < this.selectedArray.length; i++) {
                // 当点击row里面pointId与传入this.selectedArray中的
                // 数据（id），相匹配，则取消勾选，
                // 并改变传入的数据数组
                    if (this.selectedArray[i] === item.pointId) {
                        this.selectedArray.splice(i, 1)
                    }
                }
            }
        },
        handleRowClick(row, event, column) {
            // 取消选中该行
            this.$refs.multiTable.toggleRowSelection(row);
        },
        // dialog开启时，调用的方法
        async handleOpen() {
            await this.getData(this.queryData);
            // 对比当前，所有，勾选项，进行勾选操作
            this.$nextTick(() => {
                this.$refs.multiTable.clearSelection()
                if (this.selectedArray) {
                    for (let i = 0; i < this.selectedArray.length; i++) {
                        for (let j = 0; j < this.tableData.length; j++) {
                            if (this.selectedArray[i] === this.tableData[j].pointId) {                                this.$refs.multiTable.toggleRowSelection(this.tableData[j])
                            }
                        }
                    }
                }
            })
        },

        // 处理关闭
        handleClose() {
            this.close()
        },

        // 关闭dialog
        close() {
            const data = { flag: false, callback: null }
            this.paging.page = 1
            // 关闭dialog，请根据自己的情况改
            this.$emit('closeDialog', data)
        },

        submit() {
			// 当前勾选项
            const pointList = this.tableCheckedData
            // console.log('pointList: ', pointList);
            // 当前勾选
            let lastPageChecked = pointList.map(v => { return v.pointId })
            lastPageChecked = Array.from(new Set(lastPageChecked))
            const finalChecked = arrayDeDuplication(lastPageChecked.concat(this.selectedArray))
            const arrayCleaned = finalChecked.filter(item => item !== undefined);
            //
            if (arrayCleaned.length <= 0) {
                return this.$message.warning('请选择点位！')
            }
            // console.log('lastPageChecked: ', lastPageChecked);
            // console.log('arrayCleaned: ', arrayCleaned);
            //
            this.close()
            //
        },
    },
}
</script>