1.资料:iview官网 https://www.iviewui.com/
2.问题 由于iview的table并没有自带的分页功能,只能由Page组件实现分页。实现思想是每次分页就给table的data重新填充数据。但是做多选的时候,分页就会出现bug,选中之后跳转到其他页,再跳转回来,就发现以前选中的行,选中效果不见了。
3.思路
跨页选中:将每页选中的id保存下来,当翻到那一页的时候查询保存的ID数据,如果是选择过的,进行勾选操作,给数据设置
._checked = true属性即可完成选中状态
选中所有页:因为分页返回的数据只是当前页,没法做到保存所有ID,如果要对全选后的数据做操作的话得重新想办法处理,这里只能做到全选以后每页数据的样式是选中状态,即如果设置了全选所有页翻页的时候将当前页数据设置为选中状态
4.代码实现
以下是代码:
table 和 page 代码
<Table v-if="datalist.length>0"
@on-select="handleSelect"
@on-select-cancel="handleCancel"
@on-select-all="handleSelectAll"
@on-select-all-cancel="handleSelectAll"
:loading="loading" class="tables" size="small" border
ref="selection" :columns="columns" :data="datalist">
</Table>
<div class="pages" v-if="datalist.length>0">
<Button @click="handleSelectAllPage(true)">全选</Button>
<Button @click="handleSelectAllPage(false)">取消全选</Button>
<span>总计:<i>{{total}}</i>条 已勾选:<i>{{selectedSum}}</i>条</span>
<Page :total="total" size="small" show-elevator :page-size="pageSize" @on-change="changepage"
:current="pageNumber"></Page>
</div>
data 代码
columns: [
{
type: 'selection',
width: 60,
title: '全选',
align: 'center'
},
{
title: '分类',
key: 'clasname'
},
{
title: '区县',
key: 'county'
},
{
title: '名称',
key: 'name'
},
{
title: '地址',
key: 'address'
},
{
title: '来源',
key: 'usource'
},
{
title: '图层名称',
key: 'usourcetable'
},
{
title: '操作',
key: 'action',
width: 300,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.typeedit(params)
}
}
}, 'typeedit')
]);
}
}
],
selectedIds: new Set(),//选中的合并项的id
selectedSum: 0, //选中的总数量
datalist: [],
total: 0,
methods 代码
handleSelectAllPage(status){
this.importAll=status;
this.$refs.selection.selectAll(status);
},
//全选取消全选当前页
handleSelectAll(slection){
// 取消全选 数组为空
if(slection && slection.length === 0){
// 若取消全选,删除保存在selectedIds里和当前table数据的id一致的数据,达到,当前页取消全选的效果
// 当前页的table数据
var data = this.$refs.selection.data;
data.forEach((item)=>{
if(this.selectedIds.has(item.id)){
this.selectedIds.delete(item.id);
}
})
}else{
slection.forEach((item)=>{
this.selectedIds.add(item.id);
})
}
if(this.importAll){//所有页选中
//同步
this.selectedSum = this.total;
}else {
//同步
this.selectedSum = this.selectedIds.size
}
},
handleSelect(slection,row){
this.selectedIds.add(row.id);
this.selectedSum ++;
},
handleCancel(sleection,row){
this.selectedIds.delete(row.id);
this.selectedSum --;
},
// 这个函数就放在你点击翻页的函数里就行了(需要注意要在table将数据渲染完毕后执行,否则报错),
// 达到每次翻页加载时将以前选中的row勾选上的效果
// 给跨页丢失的选中行重新添加选中状态
setChecked () {
if(!this.$refs.selection || !this.$refs.selection.data ){
return null;
}
// let objData = this.$refs.selection.data;
let objData = this.datalist;//当前页数据
if(this.importAll){//选中所有页面
// this.$refs.selection.selectAll(true);
for (let index in objData) {
objData[index]._checked = true
}
}else{//没有全部选中所有页面
for (let index in objData) {
if (this.selectedIds.has(objData[index].id)) {
objData[index]._checked = true
console.log(index);
}
}
}
},
5,效果