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面向对象编程
Mar 04 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
javascript常用方法汇总
Dec 02 Javascript
angularJS 中input示例分享
Feb 09 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
Vue的MVVM实现方法
Aug 16 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 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
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
js函数排序的实例代码
2013/07/01 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python选择排序算法的实现代码
2013/11/21 Python
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
python文本数据处理学习笔记详解
2019/06/17 Python
Django models.py应用实现过程详解
2019/07/29 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
国际书籍零售商:Wordery
2017/11/01 全球购物
幼师求职信
2014/06/23 职场文书
四年级小学生评语
2014/12/26 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python