vue解决分页组件删除和添加内容-页码出现错误

删除问题

• 需求: 删除完当前页的内容,页码应该跳回前一页,显示前一页的内容
• 解决:
• 判断当前页中的数据是否只有一条了,当你决定点击删除按钮时,如果只剩一条了,则页码减法一,
• 第二个 if 判断时,满足了页码减一的情况下,让页码不能小于一,这里不写,页码会一直减,出现比一小的情况,但是页码不可能小于一,没有0页码这回事

if(xxx.length === 1){
 //  页码减减
 this.page--
 if(this.page < 1){
 this.page = 1
 }
}
// 用新的页码发送请求...重新调用渲染

添加问题

• 需求: 在点击添加内容后,如果当前页内容条数以及满了,应该添加后,渲染最后一页,也就是刚添加数据在的页面中
• 解决:
• 这里就是要求最后一页了,公式: 最后一页= 向上取整(++总数 / 每页显示的条数)
• 为什么要向上取整呢? 是这样的,例如,你有11条数据,每页显示2个,那11/2 = 5.5,是一个带有小数的数字,那么每页显示两个,第十一个应该显示在第六页中,对吧,那我们刚好通过Math函数,向上取整等于6,刚好就是我们要跳转到的页码
• 为什么要++total? ,因为在你添加后,其实当前页面中的total也就是总数,其实并没有加一,要等到你再次渲染,也就是后端的数据那边添加后,你再渲染进行覆盖,页面中的总数才是添加过后最新的总数,例如当前total是10,如果在渲染前,我们就算添加了,当前total值还是还是10,那么其实你已经有11条数据了,但是total是10,10/每页显示2条,得到的是5,那这并不是我们要跳转的页码,所以要提前手动++total值

 this.page = Math.ceil(++total / this.pagesize)