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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
jQuery 渐变下拉菜单
Dec 15 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
微信小程序实现注册登录功能(表单校验、错误提示)
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中if和or运行效率对比
2014/12/12 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
劳资员岗位职责
2013/11/11 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
职工运动会感言
2014/02/07 职场文书
企业法人代表任命书
2014/06/06 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
在职证明书模板
2015/06/15 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL