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 相关文章推荐
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
JS实现简易日历效果
Jan 25 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
php数组随机排序实现方法
2015/06/13 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
PHP chop()函数讲解
2019/02/11 PHP
js获取div高度的代码
2008/08/09 Javascript
JavaScript Prototype对象
2009/01/07 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
python读写文件操作示例程序
2013/12/02 Python
OpenCV实现人脸识别
2017/04/07 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
党员自我评价分享
2013/12/13 职场文书
后进生转化工作制度
2014/01/17 职场文书
经济担保书范文
2014/04/02 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
青奥会口号
2014/06/12 职场文书
销售团队获奖感言
2014/08/14 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
Python 中random 库的详细使用
2021/06/03 Python