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获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
javascript控制台详解
Jun 25 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
Sea.JS知识总结
May 05 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 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整合PayPal支付
2015/06/11 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
javascript事件模型代码
2007/07/01 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
python中关于for循环的碎碎念
2017/06/30 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
python实现小球弹跳效果
2019/05/10 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
自考毕业自我鉴定
2014/03/18 职场文书
小学教师师德承诺书
2014/05/23 职场文书
化工专业自荐书
2014/06/16 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL