elementui分页组件的使用
程序员文章站
2022-05-10 19:58:20
...
<!--分页 start-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageInfo.currentPage"
:page-sizes="[5, 10, 50, 100]"
:page-size="pageInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageInfo.pageTotal"
></el-pagination>
<el-table
:data="tableData.slice((pageInfo.currentPage-1)*pageInfo.pageSize,pageInfo.currentPage*pageInfo.pageSize)"
</el-table>
data(){
return{
//分页
pageInfo: {
currentPage: 1,
pageSize: 5,
pageTotal: 20
},
tableData:[]
}
},
methods:{
handleSizeChange(val) {
this.pageInfo.pageSize=val
console.log("每页"+val+"条");
},
handleCurrentChange(val) {
this.pageInfo.currentPage=val
console.log("当前页:"+val);
}
}
上一篇: 离线使用ElementUI
下一篇: map filter reduce
推荐阅读
-
一个可复用的vue分页组件
-
在vue组件中使用axios的方法
-
使用react开发日历组件的方法详解
-
小白 关于使用laypage分页 的运用简述
-
使用foreach和volist标签分别实现模板数据的分页显示-2018年6月1日11点30分
-
LotusPhp笔记之:Logger组件的使用方法
-
小程序自定义组件——创建和使用自定义组件步骤 & 自定义组件属性properties数据列表、data数据、methods方法的用法
-
yii2组件之多图上传插件FileInput的详细使用,yii2fileinput
-
LotusPhp笔记之:Cookie组件的使用详解
-
详细介绍MvcPager分页控件使用的实例方法