基于vue的element-table分页选中

核心思路 采用前端分页，通过复制引用，保证选中状态不丢失每次多选都需要清空当前页选择项，push完将其放入集合为列表中的所有属性添加索引分页后重新分配选中 核心方法 data(){ return{ data:[], copyData:[], pageInfo:{pageNum:1,pageSize:5,total:0}, multipleSelectionIndex:[] } } handleSelect(select,row){ const self=this if(select.length){ self.clearSelection() select.forEach((item)=>{ self.multipleSelectionIndex.push(item.index) }) }else{ const index = self.multipleSelectionIndex.indexOf(row.index) self.multipleSelectionIndex.splice(index,1) } self.multipleSelectionIndex=Array.from(new Set(self.multipleSelectionIndex)) } handleSelectAll(selection){ const self=this if(slection.length){ self.clearSelection() selection.forEach((item)=>{ self.multipleSelectionIndex.push(item.index) }) }else{ self.clearSelection() } self.multipleSelectionIndex=Array.from(new Set(self.multipleSelectionIndex)) } clearSelection(){ const self=this const currentPage=self.pageInfo.pageNum const start=(currentPage-1)*self.pageInfo.pageSize const end=currentPage*self.pageInfo.pageSize for(let i=start;i<end;i++){ const index=self.multipleSelectionIndex.indexOf(i) if(index!==-1){ self.multipleSelectionIndex.splice(index,1) } } } changePage(currentPage){ this.pageInfo.pageNum=currentPage const start=(currentPage-1)*self.pageInfo.pageSize const end=currentPage*self.pageInfo.pageSize this.copyData=this.data.splice(start,end) this.pageInfo.total=this.data.length this.selectRows() } changePageSize(pageSize){ this.pageInfo.pageSize=pageSize const start=(currentPage-1)*self.pageInfo.pageSize const end=currentPage*self.pageInfo.pageSize this.copyData=this.data.splice(start,end) this.pageInfo.total=this.data.length this.selectRows() } selectRows(){ this.$nextTick(()=>{ this.data.forEach((item,index)=>{ if(this.multipleSelectionIndex.includes(index)){ this.$refs.table.toggleRowSelection(this.data[index],true) } }) }) } tableRowClassName(row,index){ row.row.index=(this.pageInfo.pageNum-1)*this.pageInfo.pageSize+row.rowIndex }