ElementUi中el-table分页效果，前端控制分页

原文地址：https://blog.csdn.net/qq_40599116/article/details/121951820

现实的场景中很经常遇到表格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