分页多选,分页进行切换的时候,ids存储
<el-table height="calc(100vh - 280px)" :data="infoList" @select="handleSelectionChange" ref="multipleTable" @row-click="clickRow" @select-all="clickAll"> </el-table>
1、@select="handleSelectionChange":多选的时候函数:传两个参数,selection和row,判断当row在selection中时,说明是勾选上;row不在selection中时,说明是取消勾选:
handleSelectionChange(selection,row){ var selectIds = selection.map(item => item.id); if( selectIds.includes(row.id) ){ //勾选上 this.ids = Array.from(new Set(this.ids.concat(selectIds))); }else{ //取消勾选 var index = this.ids.findIndex(item=>{ return item == row.id }) this.ids.splice(index,1); } } 2、@row-click="clickRow":点击tr时,勾选上
clickRow(row, column, event) { //table:ref="multipleTable"
this.$refs.multipleTable.toggleRowSelection(row);
//点击后看是勾选还是取消勾选的逻辑
if(this.ids.includes(row.id)){ //取消勾选
var index = this.ids.findIndex(item=>item==row.taskDetailId);
this.ids.splice(index,1);
}else{ //勾选上
this.ids.push(row.id);
}
},
3、@select-all="clickAll":全选和取消全选
clickAll(selection){
if(selection.length==0){ //取消全选,ids中除去当前list的值
this.infoList.forEach(item=>{ //从当前页的数据中取消
var index = this.ids.findIndex(v=>v==item.taskDetailId);
this.ids.splice(index,1);
})
}else{ //全选
var allIds = selection.map(item=>item.id);
this.ids = Array.from(new Set(this.ids.concat(allIds)));
}
}
`
上面是全选或者点击整行或者勾选checkbox时,存储的ids的情况;
当点回到之前勾选过的页面时,之前数据的数据重新选择上,需要在获取列表数据的方法中,勾选:
this.$nextTick(() => { this.infoList.forEach(row => { //将已勾选的再勾选上 if(this.ids.includes(row.id)){ this.$refs.multipleTable.toggleRowSelection(row,true) } }) });