当我们从后台请求大量数据并显示在页面上时，我们不想在请求的数据可能是数百条或更多数据时显示在一个页面上，所以我们需要使用分页功能来完成它。

1.这次使用vue2.0 element-ui实现了一个分页功能。element-ui的这个组件特别丰富。分页为我提供了分页功能，可以通过分页快速完成

最终效果显示

Div class=' deit' div class='面包屑' El-面包屑分隔符='/' El-面包屑-itemi class=' El-icon-date'/I数据管理/El-面包屑-item El-面包屑-item用户列表/El-面包屑-item/El-面包屑div class=' cantainer ' El-tablestyle=' width : 100%；':数据=' userlist。slice ((currentpage-1) * pagesize，current page * page size)'//数据请求的处理，最重要的一句话是El-table-column type=' index ' width=' 50 '/El-table-column El-table-column标签=' date ' prop=' date ' width=' 180 '/El-table-column El-table-column标签=' mailbox' prop='email '对于所选的每一行，应该显示多少内容：页面大小='页面大小'/显示当前行的行数。Layout=' total，sizes，prev，pager，next，Jumper ' : total=' userrist . length '/这是为了显示总共有多少数据。/El-paging/div/div/div需要定义一些数据，userlist定义了一个空数组，所有请求的数据都存储在里面。

data(){ return { current page :1，//initial pagesize:10，//每页的数据userList: []}，有些数据是用方法处理的。数据源是json-server构建的本地数据，数据由vue-resource请求。

创建了(){this。handleuserlist ()}，方法： {//初始页面currentPage，初始页面数据pagesize和数据handlesizechange :函数(size) {this。pagesize=sizeConsole.log(this.pagesize) //下拉显示每页数据}，HandleCurrentChange : Function(CurrentPage){ this。CurrentPage=CurrentPageconsole . log(this . current page)//点击页面}、handleuserlist () {this。$ http . get(' http://localhost 33603000/user list ')。然后(RES={//这是本地请求的数据接口。this . userrist=RES . body })} }以上所有函数都是分页所需要的，在我自己的案例写作中也遇到过。总结后方便查看，喜欢什么可以关注。

你可以关注https://github.com/MrZHLF/vue-admin-system.这个案子还在改进，功能还在增加

摘要

以上是边肖介绍的Vuelelement-UI分页效果的示例代码的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！