一、概述
当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。
本次所使用的是vue2.0 element-ui实现一个分页功能，element-ui这个组件特别丰富，分页中给我提供了一个Pagination 分页，使用Pagination 快速完成分页功能
最终效果
二、完整代码
test.vue
代码语言：javascript复制<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="width: 100%;"
:data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
>
<el-table-column label="id" prop="id" width="180">
</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>
<el-pagination
background
@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>
</template>
<script>
export default {
name: 'test',
data() {
return {
currentPage: 1, //初始页
pagesize: 5, // 每页的数据
userList: []
}
},
created() {
this.handleUserList()
},
methods: {
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function(size) {
this.pagesize = size
console.log(this.pagesize) //每页下拉显示数据
},
handleCurrentChange: function(currentPage) {
this.currentPage = currentPage
console.log(this.currentPage) //点击第几页
},
handleUserList() {
// this.$http.get('http://localhost:3000/userList').then(res => { //这是从本地请求的数据接口，
// this.userList = res.body
// })
// 构建临时数据
let data = [
{
id:1,
date:"2020-01-22 12:12:12",
name:123,
},
{
id:2,
date:"2020-01-22 12:12:12",
name:123,
},
{
id:3,
date:"2020-01-22 12:12:12",
name:123,
},
{
id:4,
date:"2020-01-22 12:12:12",
name:123,
},
{
id:5,
date:"2020-01-22 12:12:12",
name:123,
},
{
id:6,
date:"2020-01-22 12:12:12",
name:123,
},
{
id:7,
date:"2020-01-22 12:12:12",
name:123,
},
{
id:8,
date:"2020-01-22 12:12:12",
name:123,
},
{
id:9,
date:"2020-01-22 12:12:12",
name:123,
},
{
id:10,
date:"2020-01-22 12:12:12",
name:123,
},
]
this.userList = data
}
}
}
</script>
<style scoped>
</style>代码解释
代码语言：javascript复制:data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" //对数据请求的处理，最为重要的一句话<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>本文参考链接：
https://www.cnblogs.com/zhoulifeng/p/9395295.html
