在这里插入代码片
## 第一步在template添加内容
<div class="shanglist-yi"
v-for="(item,index) in Produlistinde.slice((currentPage - 1) * PageSize,currentPage * PageSize)"
:key="index"
@click="shanglistyyu">
<span class="shanglist-yi-span"><img :src="item.imgage" alt=""></span>
<p>{{item.name}}</p>
<div>
<p class="divopp">¥2{{item.money}}</p>
<span class="buttngf">
<span class="butt-let">{{item.text}}</span>
<span class="butt-rig">¥{{item.moneyt}}</span>
</span>
</div>
</div>
<!-- 分页 -->
<div class="Productfen">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[10, 15, 20]"
:page-size="PageSize"
layout="prev, pager, next"
:total="totalCount"
>
</el-pagination>
</div>
## 第二步在data(){return{ }}添加内容
data(){
return{
// 默认显示第一页
currentPage: 1,
// 总的数据条数
totalCount: 15,
// 默认每页显示的条数(可修改)
PageSize: 5,
}
}
## 第三步在mothods:{}和 created() {}里面设置内容
mothods:{
// 修改每页显示的条数
handleSizeChange(side) {
// 改变每页显示的条数
this.PageSize = side;
// 注意:在改变每页显示的条数时,要将页码显示到第一页
this.currentPage = 1;
},
// 显示第几页
handleCurrentChange(pageNumber) {
// 改变默认的页数
this.currentPage = pageNumber;
}
}
created(){
// 获取数据总数
this.totalCount = this.Produlistinde.length
}
vue + Element 实现分页功能
最新推荐文章于 2022-07-15 13:14:09 发布