其他分享
首页 > 其他分享> > ElementUi中el-table分页效果,前端控制分页

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

标签:el,分页,pagesize,ElementUi,prop,val,currentPage,total,page
来源: https://www.cnblogs.com/eyesfree/p/16488971.html