场景描述:比方说表格第一页选中了两条数据,跳转到第二页,然后返回到第一页,第一页的选中效果要仍然有,在回到第二页选中三条数据,那么总共选中了的五条数据,再取消选中一条,现在总共选择了四条数据。
首先,你要知道如何让表格默认选中,我们使用了两个data
,一个是当前页选中的值为chooseList
,还有一个是所有页面选中的值totalChooseList
,在初始化进来拉取接口数据的时候,用一个双层循环将默认值赋予,不用延时的话可能会出错,因为,表格还没有完全渲染好,所以需要一个setTimeout
的延时
//表格的初始化,将表格的绑定数据进行渲染,然后,将最终值进行判定,选择哪些数据是需要默认选中的
for(let i in this.resDataList){
let flag=false;
for(let j in this.totalChooseList){
if(this.resDataList[i].id===this.resDataList[j].id){
flag=true;
break;
}
}
if(flag){
setTimeout(()=>{
this.$refs.selection.toggleSelect(i);
},1)
}
}
再写一个方法是选择性的将chooseList中的数据塞进totalChooseList,如果有了,那就不塞进去了,没有,就将这个值塞进去存储起来
//选择性放入最终值
addTotalChooseList(){
for(let i in this.chooseList){
let flag=false;
for(let j in this.totalChooseList){
if(this.chooseList[i].supplier_no===this.totalChooseList[j].supplier_no){
flag=true;
break;
}
}
if(!flag){
this.totalChooseList.push(this.chooseList[i]);
}
}
},
在分页切换的时候,就要执行选择性放入最终值了,别忘了进行清空chooseList中的值
//分页页数改变
changePage(current){
this.queryList.pageNum=current;
this.addTotalChooseList();
this.chooseList=[];
this.getDataList();
},
给表格添加选中值发生变化的事件以及删除的事件
<Table @on-select-cancel="deleteChoose" @on-selection-change="selectChoose" :columns="columns1" ref="selection" :data="resDataList" size="large"></Table>
//选中值发生变化的事件
selectChoose(selection){
this.chooseList=selection;
this.addTotalChooseList();
},
//删除的事件
deleteChoose(selection,row){
for(let i in this.totalChooseList){
if(this.totalChooseList[i].supplier_no===row.supplier_no){
arrayDelete(this.totalChooseList,i);
break;
}
}
},
arrayDelete为引入的公用方法
//数组删除一个元素
export function arrayDelete(array,index) {
array.splice(index,1);
}
最终的结果就是this.totalChooseList
,主要就是两个难点,一个表格的默认值渲染,你可以将渲染放在表格的初始化渲染事件中,能节约很多的事情,其次就是对于选中值的操作,选中值和最终值进行对比,有就不做添加,没有即添加,然后还要给表格绑定删除的事件,将要删除的值从最终值中删去,就完成啦!