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 相关文章推荐
jQuery学习笔记之Helloworld
Dec 22 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 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 include,include_once,require,require_once
2008/09/05 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
python多进程间通信代码实例
2019/09/30 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
华为c/c++笔试题
2016/01/25 面试题
this关键字的含义
2015/04/08 面试题
计算机网络专业个人的自我评价
2013/10/17 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
企业军训感想
2014/02/07 职场文书
四群教育工作实施方案
2014/03/26 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
护士先进个人总结
2015/02/13 职场文书
病人慰问信范文
2015/02/15 职场文书
2015新学期开学寄语
2015/02/26 职场文书