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 相关文章推荐
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
Nest.js散列与加密实例详解
Feb 24 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与XML联手进行网站编程代码实例
2008/07/10 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
javascript 打印内容方法小结
2009/11/04 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
python二叉树的实现实例
2013/11/21 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
pandas的相关系数与协方差实例
2019/12/27 Python
Django中template for如何使用方法
2021/01/31 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
走进敬老院活动总结
2014/07/10 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
QT与javascript交互数据的实现
2021/05/26 Javascript
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL