html相关代码
//每页展示的内容的相关代码
<div class="content">
<el-row>
<el-col class="el-col" :span="8" v-for="item in eventList" :key="item.event_id" >
<el-card class="el-card" >
<el-link :underline="false" @click="openCompetitionDetail(item.event_id)">
<div class="el-card-one">
<!-- "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
<img style="margin-bottom:5px;width: 250px;height: 200px":src=item.event_Photo ><br>
<span class="event-span">{{ item.event_Name }}</span>
</div>
<div style="height: 20px;margin-top: 260px;padding: 0px">
<span style="background-color:#1dd67d;border-radius: 5px;color: white;font-size: 13px"> {{item.event_State}} </span>
</div>
<div class="el-card-two">
<el-divider class="el-divider"></el-divider>
<div style="color: darkgrey;">
<span style="font-size: 15px">比赛时间:</span>
<span>{{item.event_Date}}</span><br>
<div>
<div style="width: 80px;float:left;">
<span style="font-size: 15px">报名时间:</span>
</div>
<div style="width: 80px;float:left;">
<span>{{item.event_ApplyTimeBegin}}</span>
<span>{{item.event_ApplyTimeEnd}}</span>
</div>
</div>
</div><br><br>
<div style="font-size: 13px">
<span>地点:</span>{{item.site_Locate}}<br>
<span>主办方:</span><span>{{item.user_Name}}</span>
</div>
</div>
</el-link>
</el-card>
</el-col>
</el-row>
</div>
//实现分页的相关代码
<el-pagination
@current-change="handleCurrentChange" //改变当前页时产生的动作
:current-page="currentPage" //绑定当前页
:page-size="pageSize" //绑定当前页数
layout="total,prev, pager, next,jumper"
:total="eventData.length"> //当前数据总数
</el-pagination>
data相关数据
currentPage:1, //当前页数,默认1
pageSize:4, //每页数据量为4
mounted函数
mounted(){
axios.get('/page/allEvents')
.then(response=>{
this.eventData = response.data.data //获取后端数据
this.eventList = this.eventData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize);//将数据切片
})
.catch(function (error) { // 请求失败处理
console.log(error);
})
},
methods相关代码
handleCurrentChange(val) {
this.currentPage =val;
this.getEventList();
console.log(`当前页: ${val}`);
},
getEventList() {
this.eventList = this.eventData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize);
},
页面效果