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/zh-tw/n/193797.html