當我們向后臺請求大量數據的時候，并要在頁面展示出來，請求的數據可能上百條數據或者更多的時候，并不想在一個頁面展示，這就需要使用分頁功能來去完成了。

1.本次所使用的是vue2.0+element-ui實現一個分頁功能，element-ui這個組件特別豐富，分頁中給我提供了一個Pagination?分頁，使用Pagination 快速完成分頁功能

?

最終效果展示

?

<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 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>

?

需要data定義一些，userList定義一個空數組，請求的數據都是存放這里面

?

data () {return {currentPage:1, //初始頁pagesize:10, // 每頁的數據userList: []}},

?

對一些數據，方法處理，數據的來源是自己通過json-server搭建的本地數據，通過vue-resource請求數據，

?

created() {this.handleUserList()},methods: {// 初始頁currentPage、初始每頁數據數pagesize和數據datahandleSizeChange: 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})}}

?

?

以上都是分頁所需的功能，也是自己在自己寫案例中所遇到的，并總結下方便查看，喜歡的可以關注一下

總結

以上是生活随笔為你收集整理的vue+Element-ui实现分页效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。