1.el-table綁定數據

<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"height="auto"borderstripestyle="width: 100%">

添加 el-pagination分頁

<div class="block"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 15, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="totalNum"></el-pagination> </div>

data中添加相應參數

data(){return {tableData: [], //數據currentPage: 1,//默認顯示第一頁pageSize:5,//默認每頁顯示5條totalNum: 100 //總頁數} }

添加跳頁面和修改每頁個數的動態函數

handleSizeChange(val) {console.log(`每頁 ${val} 條`);this.pageSize = val; //動態改變 }, handleCurrentChange(val) {console.log(`當前頁: ${val}`);this.currentPage = val; //動態改變 }

在頁面加載時添加總數量

created(){this.totalNum=this.tableData.length; }

設置表格翻頁的序號遞增

<el-table-column type="index" :index="indexMethod" align="center" label="序號" width="50"></el-table-column>//方法寫在methods里面 indexMethod (index) {let currentPage = this.paginationData.currentPage; // 當前頁碼let pageSize = this.paginationData.pageSize; // 每頁條數return (index + 1) + (currentPage - 1) * pageSize; // 返回表格序號 },

總結

以上是生活随笔為你收集整理的ElementUI Pagination 分页器绑定数据的全部內容，希望文章能夠幫你解決所遇到的問題。

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