微客导航 » 文章资讯 » 在vue和element-ui的table中实现分页复选功能

在vue和element-ui的table中实现分页复选功能

2023-08-05 01:39:06 348

背景

后台管理系统中，使用表格展示数据时，可能的需求是多项选择然后进行批量操作，也期望能翻页多选。

实现

页面结构如下











编辑

模拟数据实现分页

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}}

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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

在vue和element-ui的table中实现分页复选功能

热门推荐

随机推荐