elementui分页功能

最新推荐文章于 2024-09-04 16:40:35 发布

m0_56408460

最新推荐文章于 2024-09-04 16:40:35 发布

阅读量34

点赞数

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/m0_56408460/article/details/131449117

版权

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">&nbsp;{{item.event_State}}&nbsp;</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);
    },

页面效果