element表格翻页第2页从1开始编号(后端从0开始分页)
2019-12-11 12:10
876 查看
项目中常见的分页显示,第二页从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开始的问题。
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- vue+element 表格翻页,序号仍从1开始,解决为连续序号
- element-ui多选框表格 4000 ,翻页选中仍然有记忆功能
- vue elementUi表格与分页的结合---工作总结
- Vue2.0+ElementUI+PageHelper实现的表格分页
- elementui el-table 后端分页
- 利用vue + element实现表格分页和前端搜索的方法
- Vue+element-ui 实现表格的分页功能示例
- element-ui表格多选实现翻页选择记忆功能
- bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页
- 利用vue和element-ui设置表格内容分页
- Element实现表格分页数据选择+全选所有完善批量操作
- element-ui表格控件纯前端分页方法
- 利用vue和element-ui设置表格内容分页的实例
- iview表格翻页index还是从1开始加起
- Vue2.0 + ElementUI的+ PageHelper实现的表格分页
- 表格的后端分页和后端搜索,前端的操作步骤
- element-ui表格组件分页后完整导出到excel的方法
- vue+element的表格分页和搜索功能
- vue2.0 + element UI 中 el-table 数据导出Excel (多级表格适用,无分页版)