【个人笔记】elementui table组件分页的一个小问题

最新推荐文章于 2024-01-19 11:29:22 发布

原创最新推荐文章于 2024-01-19 11:29:22 发布 · 699 阅读

0 ·

CC 4.0 BY-SA版权

个人笔记专栏收录该内容

14 篇文章

订阅专栏

本文详细描述了在使用Element UI的table组件时遇到的一个分页Bug，当删除非第一页最后一个数据时，table不会自动返回上一页。通过监听数据总数和分页数的变化，可以实现在数据总数减少至当前页容量时自动向前翻页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日前，在开发一个小项目的时候接收到后端小哥哥的一个反馈，悲惨的他兼职做了基础测试的事情，他跟我说你的table出现了一个小Bug，如果分页数在两页以上，当你删除非第一页的当前页的最后一个数据时，table不会返回上一页，即停留在当前页显示无数据，总得来说就是分页的数据总数正确，但是页数不对了，后来查到了一个解决方法，先记下来

<el-table :data:'data.slice((currpage - 1)*pagesize ,currpage *pagesize)'>
<el-table-column></el-table-column>
<el-table-column></el-table-column>
</el-table>
<el-pagination
layout='total,sizes,prev,pager,next,jumper'
@size-change='handlesizechange'
@current-change='handlecurrentchange'
:page-sizes='[5,10]'
:page-size='pagesize'
:total='pagetoal'    
>
</el-pagination>


//要让它知道要向上翻页，就需要监听它的数据总数和分页数，判断是否需要改变页数
watch:{
	pagetotal(){
		if(this.pagetotal == (this.currpage-1) * this.pagesize && this.pagetotal !=0) 
			this.currpage -= 1
	}
}
//例如：你按五个数据一页，当你删除第六个数据的时候，它就会监听到总数等于每一页设定的数量，就将页数减一