vue elementui分页,vue element 分页
本文主要详细介绍vue Element-ui的分页效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue Element-ui实现分页效果的具体代码，供大家参考。具体内容如下
当我们从后台请求大量数据，想在页面上显示时，在请求的数据可能有几百个甚至更多的情况下，我们不想在一个页面上显示，所以需要使用分页功能来完成。
1.这次我用vue2.0 element-ui实现了一个分页功能。element-ui组件特别丰富，给我提供了一个Pagination分页，可以用来快速完成分页功能。
最终效果显示
div class=deit
div class=crumbs
el-breadcrumb分隔符=/
El-bread crumb-item class= El-icon-date /I数据管理/el-breadcrumb-item
El面包屑项目用户列表/el面包屑项目
/el-breadcrumb
div class=cantainer
El-table style= width:100%；
:data= userlist . slice((current page-1)* pagesize，current page * pagesize)//最重要的一句话就是数据请求的处理。
El-表格-列类型=索引宽度=50
/El-表格-列
El-表格-列标签=日期属性=日期宽度=180
/El-表格-列
El-table-column label= user name prop= name width= 180
/El-表格-列
El-table-column label= mail prop= email width= 180
/El-表格-列
El-table-column label= address prop= address width= 200
/El-表格-列
/el-table
el分页
@size-change=handleSizeChange
@ current-change= handleCurrentChange
:当前页面=当前页面
:page-size=[5，10，20，40] //这是下拉框中的可选内容。选择的每一行应该显示多少内容？
:page-size=pagesize //显示当前行数。
layout=总计，大小，上一页，分页，下一页，跳转
:total=userList.length //这是为了显示总共有多少数据，
/El-分页
/div
/div
/div
需要定义数据，userList定义了一个空数组，所有请求的数据都存储在这个数组中。
data () {
返回{
CurrentPage:1，///初始页面
Pagesize:10，//每页数据
用户列表：[]
}
},
对于一些数据，方法处理，数据来源是通过json-server自建的本地数据，通过vue-resource请求数据。
已创建(){
this.handleUserList()
},
方法：{
//初始页面currentPage、初始页面数据pagesize和数据data
handleSizeChange:函数(大小){
this.pagesize=size
Console.log(this.pagesize) //每页上的下拉数据
},
handleCurrentChange:函数(currentPage){
this . current page=current page；
console . log(this . current page)//点击哪个页面
},
handleUserList() {
这个。$ http . get( 3358 localhost:3000/userlist )。然后(RES={//这是从本地请求的数据接口，
this.userList=res.body
})
}
}
以上都是分页所需要的功能，在我自己的写作案例中也遇到过。我总结一下，方便查看，喜欢的可以关注一下。
vue.js的学习教程请点击专门的vue.js组件学习教程和Vue.js前端组件学习教程进行学习。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。