前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >eltable的分页

eltable的分页

原创
作者头像
安德玛
发布2022-03-05 14:04:43
5520
发布2022-03-05 14:04:43
举报
文章被收录于专栏:Cordova封装H5 APP

分页思路

前端实现自己的分页

这种思路一般就是后台返回的数据没有做分页处理

前端对返回的数据进行简单的分页

eleui提供了分页的插件,直接使用就可以了

实现思路:

对后端返回的数据js计算出它的length,length就是

分页参数中的总数,

代码语言:javascript
复制
<el-table
      @row-click="handle"
      :row-class-name="tableRowClassName"
      :data="typeList.slice((this.query.pageNum - 1) * this.query.pageSize, this.query.pageNum * this.query.pageSize)">
分页标签:
    <el-pagination background :current-page.sync="query.pageNum" :page-size="query.pageSize"
      layout="total,prev, pager, next,sizes" :total="typeList.length" @current-change="handleCurrentChange"
      @size-change="changeSizeHandler" size="small"></el-pagination>
//分页参数
        query: {
          pageNum: 1,
          pageSize: 10
        },
修改每页显示数量和改变页数方法:
      changeSizeHandler(size) {
        this.query.pageSize = size
      },
      handleCurrentChange(currentPage) {
        this.query.pageNum = currentPage
      },

后端实现的分页并返回分页参数给前端

后端已经分了页,将分页参数返回给前端

前端的处理:

分页标签

代码语言:javascript
复制
<el-pagination
      background
      :current-page="page.currPage"
      :page-size="10"
      layout="total,prev, pager, next"
      :total="page.totalCount"
      @current-change="handleCurrentChange"
      size="small">
      </el-pagination>

        //分页参数
        page:{
          currPage: 1, // 当前页
          pageSize: 10, // 每页显示条目个数
          totalCount: 1 // 总条目数
        },

改变页数方法

代码语言:javascript
复制
handleCurrentChange(val) {
        this.page.currPage = val;
        this.getList();
      },

前端将当前的点击页数作为参数传递给后台,后台返回指定页的所有数据

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档