Vue前端分页实现教程

一、前端怎么实现分页

1、理解前端分页的概念

前端分页就是在前端对数据进行分页显示，分页的目的就是为了让用户更好地浏览数据。在分页的过程中，我们一般会使用限制每一页的条数，根据数据总数计算出总页数，实现对不同页码的数据请求。

2、实现前端分页的思路

前端分页的实现思路很简单，就是在接口请求完数据之后将数据渲染到页面上，通过计算每一页应该显示的数据，实现分页功能。在Vue中，我们可以通过计算属性和Watch属性来动态计算每一页的数据，实现前端分页的功能。

二、纯前端实现分页

1、Vue的分页插件Vue-paginate

  // 引用Vue分页插件
  import Paginate from 'vuejs-paginate'
    
  // 注册Vue分页插件
  export default {
    name: 'app',
    components: {
      Paginate
    },
    data () {
      return {
        currentPage: 1,
        perPage: 10,
        totalItems: 20
      }
    },
    computed: {
      pageCount() {
        return Math.ceil(this.totalItems / this.perPage)
      },
      startItem() {
        return (this.currentPage - 1) * this.perPage
      },
      endItem() {
        return this.startItem + this.perPage
      },
      pages() {
        const pages = [];
        for (let i = 1; i <= this.pageCount; i++) {
          pages.push(i)
        }
        return pages;
      }
    },
    watch: {
      currentPage: function(val) {
        this.startItem = (val - 1) * this.perPage;
        this.endItem = this.startItem + this.perPage;
      }
    }
  }

2、原生JS实现分页

  function fenye(pageIndex, pageSize,totalCount) {
               var pageData = [];//分页后的数据
               if(pageIndextotalCount){//如果计算出来的当前页面显示条数超过了总数据条数
                   pageIndex=pageCount;//将当前页面显示条数设置为总数据条数
               }
               var startCount=pageSize*(pageIndex-1);//计算当前页面显示的第一条数据的索引

               for (var i = startCount; i < totalCount&&i<startCount+pageSize; i++) {//将当前页面的数据循环存入pageData数组中
                   pageData.push(i);
               }
               console.log('第'+pageIndex+'页，每页'+pageSize+'数据：'+pageData.toString());//输出当前页面的数据
           }

三、前端实现分页功能

1、在Vue中使用element-ui分页组件

{{ item.name }}
{{ item.age }}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/193797.html