vue + Element 实现分页功能

在这里插入代码片

## 第一步在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
}