VUE+element实现分页展示

最新推荐文章于 2023-07-26 21:04:09 发布

原创最新推荐文章于 2023-07-26 21:04:09 发布 · 4.7k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#分页

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在前端开发中实现数据分页展示的方法，通过使用Vue框架和Element UI组件库的分页组件，解决了数据量大时页面滚动条无限延长的问题。文章详细展示了如何在模板中使用v-for指令结合分页组件，以及在脚本中设置数据接口请求和分页逻辑。

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

后来百度，参考了https://blog.youkuaiyun.com/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>

最终实现效果如下：