ElementUI分页的实现

最新推荐文章于 2024-07-09 14:00:46 发布

前端-文龙刚

最新推荐文章于 2024-07-09 14:00:46 发布

阅读量3k

点赞数

分类专栏： Element Vue 文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/qq_17211063/article/details/129138865

版权

Vue 同时被 2 个专栏收录

98 篇文章 2 订阅

订阅专栏

Element

36 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中利用ElementUI库进行分页功能的实现，包括设置分页组件的属性如`currentPage`,`pageSize`,`total`，以及响应式处理`@size-change`和`@current-change`事件来更新数据列表。

摘要由CSDN通过智能技术生成

官网地址：Element - The world's most popular Vue UI framework

第一步：拷贝你喜欢的分页类型放在你的组件页面需要用到的分页位置

<el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="q.pagenum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="q.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
@size-change="handleSizeChange"：每页显示条数事件

@current-change="handleCurrentChange"：当前页的事件

:current-page="q.pagenum"：当前的页码值

:page-sizes="[10, 20, 30, 40]"：可跳转的当前页条数

:page-size="q.pagesize"当前页的总数

:total="total"：列表的总数据

第二步：data中定义对应的参数

q: { // 查询参数
        pagenum: 1, // 默认第一页数据
        pagesize: 10, // 默认当前页显示数据条数
      },

第三步：定义对应的分页方法

handleSizeChange (size) { // 改变每页数量的事件
      this.q.pagesize = size
      this.q.pagenum = 1//当改变了每页显示数量时，把默认页更改为1，不然有bug
      this.getArticleListFn()//调用或列表数据方法
    },
    handleCurrentChange (nowPage) { // 更改当前页码
      this.q.pagenum = nowPage
      this.q.pagesize = 10
      this.getArticleListFn()//调用或列表数据方法
    },

最终效果 (#^.^#)