現實的場景中很經常遇到表格el-table資料過多，為了更好的使用者體驗，所以我們需要用到分頁，一般分頁可以視資料量的大小可分為前端控制和後端控制。

<template>
<el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
:stripe="stripe"
:current-page.sync="currentPage"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10, 15, 20]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</template>
<script>
export default {
data(){
return{
stripe:true,//是否為斑馬紋 table
tableData: [],
currentPage:1,
pagesize:10,
total:0,
}
},
methods:{
handleSizeChange(val) {
this.pagesize=val;
},
handleCurrentChange(val) {
this.currentPage = val;
},
}
}
<script>
————————————————
版權宣告：本文為CSDN博主「前端菜鳥一枚」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/qq_40599116/article/details/121951820