vue+Element-ui实现分页效果
当从后台请求到大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了。
1.这次使用的是vue2.0+element-ui实现一个分页功能,element-ui中给我提供了一个Pagination 分页,使用Pagination可以快速完成分页功能
效果展示
代码附录:template
<div class="deit">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 数据管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<div class="cantainer">
<el-table style=" 100%;"
:data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" //对数据请求的处理,最为重要的一句话
>
<el-table-column type="index" width="50">
</el-table-column>
<el-table-column label="日期" prop="date" width="180">
</el-table-column>
<el-table-column label="用户姓名" prop="name" width="180">
</el-table-column>
<el-table-column label="邮箱" prop="email" width="180">
</el-table-column>
<el-table-column label="地址" prop="address" width="200">
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]" //这是下拉框可以选择的,每选择一行,要展示多少内容
:page-size="pagesize" //显示当前行的条数
layout="total, sizes, prev, pager, next, jumper"
:total="userList.length"> //这是显示总共有多少数据,
</el-pagination>
</div>
</div>
</div>
代码附录:script
需要data定义一些,userList定义一个空数组,请求的数据都是存放这里面
data () {
const item = {
date: "1998-01-01",
name: "王小虎",
email: "[email protected]",
address:"黑龙江。。。。"
};
return {
currentPage:1, //初始页
pagesize:5, // 每页的数据
userList: Array(20).fill(item), //复制20条一样的item数据
}
},