current position:Home>Solve the problem that the El table selection box does not display when the element UI is paged

Solve the problem that the El table selection box does not display when the element UI is paged

2021-08-25 04:31:51 Wandering around the world

el-table When paging, the selection box does not show the problem , for example : The first page selects data , Click pagination to the second page , Then back to the first page , The data selected on the first page is lost , I want to break my head and get along with the following methods , Ask the great God for advice

The core approach :

//  Table Radio Events 
        selectRole(selection, row) {
            //  Because after turning the page and clicking selection Will appear as undefined The elements of , It is necessary to judge whether there is 
            if (selection && selection.find(item => item && item.permissionId === row.permissionId)) {
                //  Select add a new row 
                this.addRows([row]);
            } else {
                //  Cancel deleting a row 
                this.removeRows([row]);
            }
        },
        //  Table select all events 
        selectRoleAll(selection) {
            //  If yes, select all, otherwise cancel all 
            if (selection.length > 0) {
                this.addRows(this.tableList);
            } else {
                this.removeRows(this.tableList);
            }
        },
        //  Add selected row 
        addRows(rows) {
            for (const item of rows) {
                //  If there is no such item in the selected data, it will be added 
                if (!this.selectedRow.find(i => i.id === item.id)) {
                    this.selectedRow.push(item);
                }
            }
        },
        //  Uncheck the row 
        removeRows(rows) {
            if (this.selectedRow && this.selectedRow.length) {
                for (const item of rows) {
                    this.selectedRow = this.selectedRow.filter(i => i.id !== item.id);
                }
            }
        },
        //  The front end implements paging   And page turning memory check 
        setPagination(no, size, data) {
            // this.tableList = data;
            this.toggleSelection(this.selectedRow);
        },
        //  Choose table There are data 
        toggleSelection(rows) {
            if (rows && rows.length) {
                rows.forEach(row => {
                    this.$nextTick(() => {
                        const checked = this.tableList.find(tableRow => tableRow.id === row.id);
                        this.$refs.roleData.toggleRowSelection(checked);
                    });
                });
            } else {
                if (this.$refs.roleData !== undefined) {
                    this.$refs.roleData.clearSelection();
                }
            }
        },

Complete code :

<template>
    <div>
        <div class="">
            <el-table
                border
                highlight-current-row
                :height="500"
                resizable
                :data="tableList"
                ref="roleData"
                :row-style="selectedHighlight"
                @select="selectRole"
                @select-all="selectRoleAll"
            >
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column label=" Serial number " type="index" width="60"></el-table-column>
                <el-table-column
                    v-for="(item, index) in tableLabelStaff"
                    :key="index"
                    :prop="item.prop"
                    :width="item.width"
                    :label="item.label"
                    :show-overflow-tooltip="item.showOverTooltip"
                >
                    <template slot-scope="scope">
                        <span>{{ scope.row[scope.column.property] }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="rolepageIndex"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="rolepageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="rolepageCount"
        ></el-pagination>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //  Pagination 
            rolepageIndex: 1,
            rolepageSize: 5,
            rolepageCount: 0,
            //  Memory paging table Selected state 
            tableList: [],
            //  Remember what has been selected 
            selectedRow: [],
            //  Header data 
            tableLabelStaff: [
                { label: ' date ', width: '133', prop: 'date', showOverTooltip: true, sortable: false },
                { label: ' full name ', width: '90', prop: 'name', showOverTooltip: true, sortable: false },
                { label: ' Address ', width: '90', prop: 'address', showOverTooltip: true, sortable: false }
            ]
        };
    },
    computed: {
        //  It is equivalent to the data returned by the back-end interface 
        tableData() {
            let list = [];
            for (let i = 0; i < 100; i++) {
                list[i] = {};
                list[i]['date'] = '2016-05-02' + i;
                list[i]['name'] = ' X.h. ' + i;
                list[i]['address'] = ` Jinshajiang road, putuo district, Shanghai ${i} Number `;
                list[i]['id'] = i;
            }
            return list;
        }
    },
    mounted() {
        //  Get the interface of the first page 
        this.currentChangePage(this.tableData, this.rolepageIndex);
        this.roleData = this.tableData;
        this.rolepageCount = this.tableData.length;
        this.setPagination(this.rolepageIndex, this.rolepageSize, this.roleData);
    },
    methods: {
        handleSizeChange: function(pageSize) {
            //  Number of entries per page 
            this.rolepageSize = pageSize;
            this.handleCurrentChange(this.rolepageIndex);
        },
        handleCurrentChange: function(currentPage) {
            // Page number switching 
            this.rolepageIndex = currentPage;
            this.currentChangePage(this.tableData, currentPage);
        },
        // Paging method ( a key )
        currentChangePage(list, currentPage) {
            let from = (currentPage - 1) * this.rolepageSize;
            let to = currentPage * this.rolepageSize;
            this.tableList = [];
            for (; from < to; from++) {
                if (list[from]) {
                    this.tableList.push(list[from]);
                }
            }

            this.setPagination(this.rolepageIndex, this.rolepageSize, this.roleData);
        },
        //  Table Radio Events 
        selectRole(selection, row) {
            //  Because after turning the page and clicking selection Will appear as undefined The elements of , It is necessary to judge whether there is 
            if (selection && selection.find(item => item && item.permissionId === row.permissionId)) {
                //  Select add a new row 
                this.addRows([row]);
            } else {
                //  Cancel deleting a row 
                this.removeRows([row]);
            }
        },
        //  Table select all events 
        selectRoleAll(selection) {
            //  If yes, select all, otherwise cancel all 
            if (selection.length > 0) {
                this.addRows(this.tableList);
            } else {
                this.removeRows(this.tableList);
            }
        },
        //  Add selected row 
        addRows(rows) {
            for (const item of rows) {
                //  If there is no such item in the selected data, it will be added 
                if (!this.selectedRow.find(i => i.id === item.id)) {
                    this.selectedRow.push(item);
                }
            }
        },
        //  Uncheck the row 
        removeRows(rows) {
            if (this.selectedRow && this.selectedRow.length) {
                for (const item of rows) {
                    this.selectedRow = this.selectedRow.filter(i => i.id !== item.id);
                }
            }
        },
        //  The front end implements paging   And page turning memory check 
        setPagination(no, size, data) {
            // this.tableList = data;
            this.toggleSelection(this.selectedRow);
        },
        //  Choose table There are data 
        toggleSelection(rows) {
            if (rows && rows.length) {
                rows.forEach(row => {
                    this.$nextTick(() => {
                        const checked = this.tableList.find(tableRow => tableRow.id === row.id);
                        this.$refs.roleData.toggleRowSelection(checked);
                    });
                });
            } else {
                if (this.$refs.roleData !== undefined) {
                    this.$refs.roleData.clearSelection();
                }
            }
        },
    }
};
</script>

<style lang="scss"></style>

copyright notice
author[Wandering around the world],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210825043148553p.html

Random recommended