问题描述:
iview 表格 添加复选框多选的功能,由于数据过大需要分页处理。每次切换分页后,之前选中的数据被清空了。
解决办法:
代码不详细介绍啦。。。 复制粘贴就能搞定。。。
<template>
<div>
<div class="table-div">
<Table :columns="columns" :height="49 * REMFontSize" :data="tableList" @on-select-all="selectAll" @on-select-all-cancel="cancelAll" @on-select="TableSelectRow" @on-select-cancel="TableSelectCancelRow" />
</div>
<div class="pager">
<Page :total="page.totalCount" show-total show-sizer transfer @on-change="onChange" @on-page-size-change="onPageSizeChange" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
page: {
totalCount: 0,
PageIndex: 1,
PageSize: 10,
},
columns: [
{
type: 'selection',
width: 60,
key: 'ID',
align: 'center'
},
{
type: 'index',
title: '#',
key: 'index',
align: 'center',
width: 70
},
{
title: '名称1',
key: 'name1',
align: 'center',
},
{
title: '名称2',
key: 'name2',
align: 'center'
},
{
title: '名称3',
key: 'name3',
align: 'center'
},
],
tableList: [],
selectEquipsIds: []
}
},
methods: {
sortData() {
if (this.selectEquipsIds.length) {
this.tableList.forEach(ele => {
if (this.selectEquipsIds.includes(ele.ID)) ele._checked = true;
})
}
},
TableSelectRow(selection, row) {
if (!this.selectEquipsIds.includes(row.ID)) {
this.selectEquipsIds.push(row.ID);
}
},
TableSelectCancelRow(selection, row) {
var _index = this.selectEquipsIds.indexOf(row.ID);
if (_index != -1) {
this.selectEquipsIds.splice(_index, 1);
}
},
selectAll() {
for (let i = this.tableList.length - 1; i >= 0; i--) {
this.TableSelectRow(null, this.tableList[i]);
}
},
cancelAll() {
for (let i = this.tableList.length - 1; i >= 0; i--) {
this.TableSelectCancelRow(null, this.tableList[i]);
}
},
onChange(param) {
this.page.PageIndex = param;
this.search();
},
onPageSizeChange(param) {
this.page.PageSize = param;
this.search();
},
search() {
调用接口的方法.(info).then(res => {
this.tableList = res.data;
this.page.totalCount = res.Total;
this.sortData();
}).catch(error => {
console.log(error);
})
},
},
}
</script>