Issue with Element UI: when a checkbox is selected and the page is changed, the selected rows' checkboxes are removed. I need to retain the selection items while paging so that users can select items from multiple pages without losing the selections from previous pages.
<el-table
ref="multipleTable"
row-key="id"
:key="tableKey"
v-loading="listLoading"
:data="list"
border
fit
style="width: 100%;"
@select="myselect"
@sort-change="sortChange"
@selection-change="handleSelectionChange"
:tree-props="{children: 'children'}"
>
.......
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
and these functions
myselect(selection, row) {
console.log('this is selection', selection);
console.log('this is row', row)
},
handleSelectionChange(val) {
this.selectedShipments = val;
window.localStorage.setItem('storedShipments', JSON.stringify(this.selectedShipments));
},
async getList() {
this.listLoading = true;
const { data } = await fetchShipmentList(this.listQuery);
this.list = data.data;
this.total = data.total;
// Just to simulate the time of the request
this.listLoading = false;
},
listQuery: {
page: 1,
limit: 10,
search: undefined,
status: undefined,
sort: 'id',
sortDir:'desc',
},