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 函数对象的多重身份
Jun 28 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
angularJS实现动态添加,删除div方法
Feb 27 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 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中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
php array_map()函数实例用法
2021/03/03 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
JS表的模拟方法
2015/02/05 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Python Property属性的2种用法
2015/06/21 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
Python实现自动上京东抢手机
2018/02/06 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
北京SQL新华信咨询
2016/09/30 面试题
八一建军节活动方案
2014/02/10 职场文书
团日活动总结模板
2014/06/25 职场文书
励志演讲稿大全
2014/08/21 职场文书
水电维修专业推荐信
2014/09/06 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书