Vue3 Element Plus Table多选框分页记忆选中回显

47 min read
<template>
    <div id="app">
        <el-table ref="multipleTable"
                  :data="tableData1"
                  @select-all="handleSelectionChange"
                  @select="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
        </el-table>
        <el-pagination :current-page.sync="page" :page-size="3" @current-change="pageChange" :total="9"></el-pagination>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                page: 1,
                tableData1: [],
                tableData: [{
                    name: '王小虎1',
                }, {
                    name: '王小虎2',
                }, {
                    name: '王小虎3',
                }, {
                    name: '王小虎4',
                }, {
                    name: '王小虎5',
                }, {
                    name: '王小虎6',
                }, {
                    name: '王小虎7',
                }, {
                    name: '王小虎8',
                }, {
                    name: '王小虎9',
                },],
                multipleSelection: {}
            }
        },
        mounted() {
            this.pageChange()
        },
        methods: {
            /**
             * 手动勾选数据行的 Checkbox 时触发
             **/
            handleSelectionChange(val) {
                // 使用当前页数做key
                this.multipleSelection[this.page] = val
            },

            /**
             * 记忆勾选方法
             **/
            check() {
                this.$nextTick(() => {
                    if (this.multipleSelection[this.page]) {
                        /**
                         * 注意:一定要multipleSelection跟表格数据比对,比对成功的使用表格数据的值设置勾选。
                         **/
                        this.multipleSelection[this.page].map(item => {
                            this.tableData1.map(val => {
                                // item.name === val.name 改为自己要比对的id值
                                if (item.name === val.name) {
                                    this.$refs.multipleTable.toggleRowSelection(val);
                                }
                            })
                        })
                    }
                })
            },

            pageChange() {
                this.tableData1 = [];
                let count = this.page * 3;
                let num = (this.page * 3) - 3;
                for (let i = num; i < count; i++) {
                    this.tableData1.push(this.tableData[i])
                }
                this.check()
            }
        }
    }
</script>