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>
