官网地址：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 = sizethis.q.pagenum = 1//当改变了每页显示数量时，把默认页更改为1，不然有bugthis.getArticleListFn()//调用或列表数据方法},handleCurrentChange (nowPage) { // 更改当前页码this.q.pagenum = nowPagethis.q.pagesize = 10this.getArticleListFn()//调用或列表数据方法},

最终效果   (#^.^#)