在vue和element-ui的table中实现分页复选功能
背景
后台管理系统中,使用表格展示数据时,可能的需求是多项选择然后进行批量操作,也期望能翻页多选。
实现
页面结构如下
编辑
模拟数据实现分页
data(){ return{ tableData:[], multipleSelection:[], pagination:{ currentPage:1, size:10, total:1000 } } }, beforeMount(){ this.fetchData() }, methods:{ fetchData(){ this.tableData=[] letstart=(this.pagination.currentPage-1)*this.pagination.size letend=this.pagination.currentPage*this.pagination.size setTimeout(_=>{ for(leti=start;i展示已选择项
已选:{{allMultipleSelection}}
在复选事件中对所选项进行存储
主要思路就是:
- 将当前页已选数据放入所有已选项
- 将所有已选项数据中当前页没选择的项移除
handleSelectionChange(val){ this.multipleSelection=val //@tip实现分页复选 console.log(val,'selection') setTimeout(_=>{ this.resolveAllSelection() },50) }, resolveAllSelection(){ letcurrentPageData=this.tableData.map(item=>item[this.uniqueKey])//当前页所有数据 letcurrentPageSelected=this.multipleSelection.map(item=>item[this.uniqueKey])//当前页已选数据 letcurrentPageNotSelected=currentPageData.filter(item=>!currentPageSelected.includes(item))//当前页未选数据 //将当前页已选数据放入所有已选项 currentPageSelected.forEach(item=>{ if(!this.allMultipleSelection.includes(item)){ this.allMultipleSelection.push(item) } }) //将所有已选项数据中当前页没选择的项移除 currentPageNotSelected.forEach(item=>{ letidx=this.allMultipleSelection.indexOf(item) if(idx>-1){ this.allMultipleSelection.splice(idx,1) } }) console.log(this.allMultipleSelection,'all') },
此时还需要在切换页面时将之间选择项进行重新选中,即遍历当前页所有数据如果存在于所有已选项中,则将其置为已选择。
fetchData(){ //... setTimeout(_=>{ //... //@tip实现分页复选 setTimeout(_=>{ this.setSelectedRow() },50) },200) }, setSelectedRow(){ //设置当前页已选项 this.tableData.forEach(item=>{ if(this.allMultipleSelection.includes(item[this.uniqueKey])){ this.$refs.asTable.toggleRowSelection(item,true) console.log(item[this.uniqueKey],'set') } }) },
以上实现了分页复选功能。
所有代码存放在@careteen/lan-vue
查看DEMO
clone仓库并引入依赖
gitclonegit@github.com:careteenL/lan-vue.git npminstall npmrunserve
浏览器打开http://localhost:8080/#/examples/pagingCheck即可看到效果
总结
以上所述是小编给大家介绍的在vue和element-ui的table中实现分页复选功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。