ElementUI分页的实现

官网地址：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()//调用或列表数据方法
    },

最终效果   (#^.^#)