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自定义事件的简单实现代码
Jan 27 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
原生js实现吸顶效果
Mar 13 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 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 设计模式之 工厂模式
2008/12/19 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
VBScript版代码高亮
2006/06/26 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
浅谈js中的bind
2019/03/18 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python Requests 基础入门
2016/04/07 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Python 中如何写注释
2020/08/28 Python
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
请假条的格式
2014/04/11 职场文书
工程承包协议书
2014/10/20 职场文书
小学科学教学计划
2015/01/21 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL