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)

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

Vue.js分页组件实现：diVuePagination
为什么80%的码农都做不了架构师?>>> 完整版下载地址:https://gitee.com/dgx/diVuePagination 完整版演示地址:http://dgx.gi ...
vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...
基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
vue.js分页组件(新手学习记录)
先说明页码总数是从接口返回的参数中获取的页码是自己定义并赋值到url中,获取指定页的数据首先新建一个page.vue组件 HTML部分,这里用了bootstrap4.0,就不去写样式了 <t ...
用vue element-ui分页组件构建一个简单的分页 ( 超详细 )
element-ui分页组件: 以下代码都是干货,欢迎大家互相评论学习方法一数据绑在div上: <template> <div><div v-for="(v ...
Vue 解决兄弟组件之间传值问题
vue中父组件向子组件传递参数时,可以通过prop来传递参数,prop可以是数组形式,也可以是对象格式,子向父组件传递参数时,通过$emit来传递,$emit('方法名', 传参),来实现子组件和父 ...
Vue中分页组件的用法
分页组件 <el-pagination@size-change="handleSizeChange":prev-text="$t('pages.previousPa ...
【vue分页功能】vue element 分页组件简简单单实现分页功能详细教学
文章目录 vue分页功能实现一.直接上代码二.需要注意的事项 vue分页功能实现一.直接上代码 // 列表结构 // 重点:data="pageList" <el-ta ...
active vue 路由样式保持_Vue 解决父组件跳转子路由后当前导航active样式消失问题...
举个栗子,导航栏如下图,当前新闻资讯的路由是:localhost:8083/#/new,导航栏样式如图所示: 随便挑个新闻点击后会跳转到子路由:localhost:8083/#/new/newDeta ...
解决XP安装SP3后添加/删除windows组件无法打开问题
解决XP安装SP3后添加/删除windows组件无法打开问题 : 1.下载下列文件拷贝到 C:\WINDOWS\Inf : C:\WINDOWS\inf\communic.inf C:\ ...

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

删除问题

添加问题

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

最新文章

热门文章