本文例項為大家分享了實現分頁功能的具體程式碼，供大家參考，具體內容如下

• 使用元件分頁
• 自己寫分頁
  

一、元件分頁

<el-pagination
     layout="prev,pager,next"
     @current-change="changePageNum"
     :current-page="pageNum"
     :page-size="pageSize"
     :total="total">
</el-pagination>

data（）{
return{
   tableData: [],total: 0,//總數
        pageNum: 1,//當前頁
        pageSize: 15,//每頁顯示數量
}
}
  mounted: function () {
      this.query();//載入頁面時，獲取資料
    },methods:{
       //切換頁碼
        changePageNum: function (val) {
        this.pageNum = val;
        this.query();
      },//通過介面，獲取資料
    query: function () {
     
 
   var data = {
          name: this.name || '',fleetId: this.FleetId,pageNum: this.pageNum,//當前頁
          pageSize: this.pageSize//查詢個數
        };
        RoleManage.getRole(data)
        .then(res => {
          var data = res;
          if (res.success) {
            this.tableData = data.obj.list;
            this.total = data.obj.total;
            this.name ='';
          } else {
            this.$message('查詢失敗');
          }
        }).catch(err => {
          // 異常情況
          console.log(err);
        });
      },}

元件分頁效果

二、自己構建分頁

有些時候需要根據需求自己寫分頁

1、分頁樣式

2、上下切頁

//排程-系統通訊錄分頁
        dispatchCourentPage: 1,//排程-系統通訊錄當前選中標籤標記
        dispatchCourentIndex: 1,//排程-系統通訊錄更多標記項:組id
        dispatchMorecommandGroupId: '',dispatchTotlePage: 0,//上頁
 handleLastPage() {
        if (this.dispatchCourentPage === 1) return;
        this.dispatchCourentPage -= 1;
        let index = this.dispatchCourentIndex;
        if (this.dispatchMorecommandGroupId != '') {
          this.queryBookMoreBygroupId(t
 
his.dispatchMorecommandGroupId);
        } else {
          this.queryBookmember(index);
        }
      },//下頁
 handleNextPage() {
   if (this.dispatchCourentPage === this.dispatchTotlePage) return;
   this.dispatchCourentPage += 1;
   let index = this.dispatchCourentIndex;
   if (this.dispatchMorecommandGroupId != '') {
     this.queryBookMoreBygroupId(this.dispatchMorecommandGroupId);
   } else {
     this.queryBookmember(index);
   }

 }

三、使用監聽屬性控制分頁顯示

computed: {
      limitData() {
        let data = [...this.table1Datas];
        return data;
      },// 因為要動態計算總頁數，所以還需要一個計算屬性來返回最終給 Table 的 data
      dataWihttp://www.cppcns.comthPage() {
        const data = this.limitData;
        const start = this.current * this.size - this.size;
        const end = start + this.size;
        return [...data].slice(start,end);
      },}

四、控制分頁，計算總頁數

方法1

/**
   *根據資料條數與每頁多少條資料計算頁數 
   * totalnum 資料條數
   * limit 每頁多少條
  */
 pageCount(totalnum,limit) {
     return totalnum > 0 ? ((totalnum < limit) ? 1 : ((totalnum % limit)
        ? (parseInt(totalnum / limit) + 1)
         : (totalnum / limit))) : 0;
 },

方法2

/**
   * 分頁的總頁數演算法
   * 總記錄數：totalRecord
   * 每頁最大記錄數：maxResult
 */
 fuArgBxMMMsnction pageCount() {
     totalPage = (totalRecord + maxResult -1) / maxResult;
}

方法3 推薦

totalPage  = Math.floor((totalRecord  +maxResult -1) /maxResult );

以上就是本文的全部內容，希望對大家的學www.cppcns.com習有所幫助，也希望大家多多支援我們。