VUE+element实现分页展示

在写前端的时候遇到一个问题，希望对不断增加的结果进行分页展示，但是实际运行时却发现随着不断增加并没有分页而是出现滚动条不断向下增加，如下：

VUE+element实现分页展示

后来百度，参考了https://blog.csdn.net/qq_42783610/article/details/81840695，问题才得到解决

<template>
<div>
   <div v-for="(value,index) in info.slice((currentPage- 
    1)*pagesize,currentPage*pagesize)">
          ...
   </div>
   <el-pagination
    layout="prev, pager, next"
    :page-size="5"    //每页多少条数据
     @current-change="current_change" //currentPage改变时会触发
     :current-page.sync="currentPage" //当前页
     :pager-count="5" //页码按钮数量
     :total="info.length"> //total总共多少条数据 
   </el-pagination>
</div>
</template>
 
 
 
<script>
export default {
     data(){
         return{
             info:[],//数据
             currentPage:1  //默认当前页为第一页
         }
     },
     methods:{
         current_change(){  //改变当前页
             this.currentPage = currentPage
         }
     },
     mounted(){  //如果使用数据接口
         axios.get('/api',{
             params:{
                  //请求参数
             }
         }).then(res => {
             this.info = res.data //赋值
         })
     }
}
</script>

最终实现效果如下：

VUE+element实现分页展示