我使用得是el-table+el-pagination來實現的，

話不多說，直接上代碼

html代碼部分

<!-- table --><el-table :data="showData" stripe style="width:100%" v-loading="listLoading"><el-table-column type="selection" width="55"></el-table-column><!-- <el-table-column type="index" prop="id" label="編號" width="100" sortable></el-table-column> --><el-table-column prop="id" label="編號" width="100" sortable></el-table-column><el-table-column prop="name" label="姓名" width="100" sortable></el-table-column><el-table-column prop="sex" label="性別" width="100" sortable></el-table-column><el-table-column prop="age" label="年齡" width="100" sortable></el-table-column><el-table-column prop="birthday" label="生日" width="120" sortable></el-table-column><el-table-column prop="address" label="地址" min-width="180" sortable></el-table-column><el-table-column label="操作"><template scope="scope"><!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">刪除</el-button>--><el-button size="small" @click="handleEdit(scope.row)">編輯</el-button><el-button type="danger" size="small" @click="handleDel(scope.row)">刪除</el-button></template></el-table-column></el-table><!-- table 傳值 --><!-- <List :message='byValue'></List> --><!-- 分頁 paging --><el-pagination @size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-size="pageSize" layout="total, prev, pager, next"background:total="total" ></el-pagination>

JavaScript代碼部分

export default {name: "Dashbord",components: {Dialog},inject: ["reload"], //注入reload方法 data() {return {showData:[],total: 0,pageSize: 10,listLoading: false,currentPage:1,};},created(){this.getUsers();this.showTable(this.currentPage,this.pageSize);},// mounted() {// this.getUsers();// }, methods: {handleSizeChange: function (size) {this.pageSize = size;console.log(this.pageSize); //每頁下拉顯示數據this.showTable(this.currentPage,this.pageSize);},handleCurrentChange: function(currentPage){this.currentPage = currentPage;console.log(this.currentPage); //點擊第幾頁this.showTable(this.currentPage,this.pageSize);},showTable(currentPage,pageSize){this.listLoading = true;this.$axios({method: "POST",url: "http://localhost:8080/api/pagingQuery",changeOrigin: true,data: {"start":currentPage,"pageSize":pageSize}}).then(result => {this.listLoading = false;this.showData = result.data;});}}, }; </script>

在el-table中，最重要的是:data,這個數據是根據你分頁效果去后臺請求返回的數據。
在el-pagination中，:page-size表示每頁顯示的數據條數；
:total：表示總的數據數量；
:page-sizes：表示我們可以自定義每頁顯示的數量；
:currentPage:表示當前的頁碼；
@size-change="handleSizeChange"，@current-change="handleCurrentChange" 是el-pagination中的事件，表示每頁顯示的數據和頁碼的變化；
layout:表示分頁欄的布局;
background:表示是否帶背景色

需要主要的是start變量，因為在后臺程序中，我使用的是limit（m,n）來進行分頁查詢的:

select * from list limit #{start},#{pageSize}

start表示開始查詢的位置，pageSize表示從開始位置要查詢的數量； 如果后臺沒有做start的處理，在這里我們可以在showTable方法中做處理：

currentPage = (currentPage-1) * pageSize；

這樣就能夠正確查詢數據

轉載于:https://www.cnblogs.com/Buries/p/11304061.html

總結

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

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