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 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
vue全局使用axios的操作
Sep 08 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 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不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
javascript中Object使用详解
2015/01/26 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
使用Python读取大文件的方法
2018/02/11 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
python中什么是面向对象
2020/06/11 Python
python绘制汉诺塔
2021/03/01 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
优秀经理获奖感言
2014/03/04 职场文书
销售内勤岗位职责
2014/04/15 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
教师旷工检讨书
2015/08/15 职场文书
医德医风学习心得体会
2016/01/25 职场文书