element表格翻页第2页从1开始编号(后端从0开始分页)


Posted in Javascript onDecember 10, 2019

项目中常见的分页显示,第二页从1开始编号,然后在切换分页的过程中,偶现不对,都是小问题,整理记录一下,供参考。
template:

...
<el-table-column 
type="index" 
label="编号"
:index="getIndex"
width="80px">
 </el-table-column>
...
<Pagination
  :total="total"
  :pageSize="pageSize"
  :currentPage="currentPage"
  @sizeChange="sizeChange"
  @currentChange="currentChange">
</Pagination>

script:

getIndex (index) {
  if (this.currentPage==0){
    return (this.currentPage) * this.pageSize + index + 1
  } else{
    return (this.currentPage-1) * this.pageSize + index + 1
  }
 },

由于后端第一页是从0开始的,而前端是从第一页开始,所以需要在当前页减1。关于分页,本页条数

sizeChange(val){
  let that = this;
  that.currentPage = 1;
  that.pageSize = val;
  that.getPageInfo(that.currentPage, val);
},

跳转页面

currentChange(val){
  let that = this;
  that.currentPage = val;
  that.getPageInfo(val, that.pageSize);
},

页面加载数据

getUserList(currentPage, pageSize){
  let that = this;
  that.$axios({
   method: 'get',
   url: '***',
   params: {
    currentPage: (currentPage || that.currentPage || 1)-1,
    pageSize: pageSize || that.pageSize || 10
   },
   needInterceptors: true,
   showError: true,
   loader: true
  }).then(function(result){
   let data = result && result.data || [];
   let page = result && result.pageCont || {};
   that.total = page.totalItems || 0;
   that.tableData = data;
  })
 },

试了几次,这样写应该是没有问题的,也解决了后端传0开始的问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
详解vue的diff算法原理
May 20 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
介绍一下28个JS常用数组方法
May 06 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 #Javascript
微信小程序登陆注册功能的实现代码
Dec 10 #Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 #Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 #Javascript
原生js实现随机点餐效果
Dec 10 #Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 #Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 #Javascript
You might like
PHP SPL使用方法和他的威力
2013/11/12 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
Python的SQLAlchemy框架使用入门
2015/04/29 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
python脚本后台执行方式
2019/12/21 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
Python分类测试代码实例汇总
2020/07/23 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
荷叶母亲教学反思
2014/04/30 职场文书
法定授权委托证明书
2015/06/18 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python
使用refresh_token实现无感刷新页面
2022/04/26 Javascript