当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了。
1。本次所使用的是vue2.0 + element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个分页分页,使用分页快速完成分页功能
最终效果展示
& lt; div类=癲eit”比;
& lt; div类=懊姘肌北?
& lt; el-breadcrumb分离器="/"比;
& lt; el-breadcrumb-item> & lt;我class=" el-icon-date”祝辞& lt;/i>数据管理& lt;/el-breadcrumb-item>
& lt; el-breadcrumb-item>用户列表& lt;/el-breadcrumb-item>
& lt;/el-breadcrumb>
& lt; div class="扼制“比;
& lt; el-table
:数据=" https://www.yisu.com/zixun/userList.slice ((currentPage-1) *页,当前页*页大小)”//对数据请求的处理,最为重要的一句话
比;
& lt; el-table-column type="指数"宽度=?0”比;
& lt;/el-table-column>
& lt; el-table-column标签="日期”道具=叭掌凇笨矶?" 180 "比;
& lt;/el-table-column>
& lt; el-table-column标签="用户姓名“道具=皀ame”宽度=" 180 "比;
& lt;/el-table-column>
& lt; el-table-column标签="邮箱”道具=暗缱佑始笨矶?" 180 "比;
& lt;/el-table-column>
& lt; el-table-column标签="地址”=暗刂贰笨矶?" 200 "提案比;
& lt;/el-table-column>
& lt;/el-table>
& lt; el-pagination
@size-change=" handleSizeChange "
@current-change=" handleCurrentChange "
:当前页面=暗鼻耙场?
:页面大?"[5、10、20、40]”//这是下拉框可以选择的,每选择一行,要展示多少内容
:页面大?"页大小”//显示当前行的条数
布局="总、大小上一页,寻呼机,接下来,跳投”
:总=皍serList.length”比;//这是显示总共有多少数据,
& lt;/el-pagination>
& lt;/div>
& lt;/div>
& lt;/div>
需要的数据定义一些,userList定义一个空数组,请求的数据都是存放这里面
数据(){
返回{
当前页:1、//初始页//页大小:10日每页的数据
userList: []
}
},
对一些数据,方法处理,数据的来源是自己通过json-server搭建的本地数据,通过vue-resource请求数据,
创建(){
this.handleUserList ()
},
方法:{//初始页当前页,初始每页数据数页大小和数据的数据
handleSizeChange:函数(大小){
这一点。页大?大小;
console.log (this.pagesize)//每页下拉显示数据
},
handleCurrentChange:函数(当前页){
这一点。当前页=当前页;
console.log (this.currentPage)//点击第几页
},
handleUserList () {
http.get美元。(“http://localhost: 3000/userList”)。然后(res=比;{//这是从本地请求的数据接口,
这一点。userList=res.body
})
}
}
以上都是分页所需的功能,也是自己在自己写案例中所遇到的,并总结下方便查看,喜欢的可以关注一下
可以关注一下https://github.com/MrZHLF/vue-admin-system,这个案例还在完善当中,功能还在增加
<强>
以上所述是小编给大家介绍的vue + Element-ui实现分页效果实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
