问题描述:
iview 表格 添加复选框多选的功能,由于数据过大需要分页处理。每次切换分页后,之前选中的数据被清空了。
解决办法:
代码不详细介绍啦。。。 复制粘贴就能搞定。。。
html">< 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>
html" title=javascript>javascript">
< 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>