VueJS 前端實現分頁功能

參考鏈接

• https://www.cnblogs.com/gerry/p/10972685.html element分頁
• https://xuliangzhan_admin.gitee.io/vxe-table/#/table/advanced/page vxe分頁

html數據說明

表格分頁主要是 :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"

• slice 函數,可用於字符串或者數據（對象未試過）。使用方法：arrayObject.slice(start,end)。假設現在存在兩個變量，str="asdzxc",arr=[1,2,3,4,5]
• 個人理解：start參數為數組或者字符串的算起的位置。。也就是說，-1 指最后一個元素，-2 指倒數第二個元素，以此類推，正常的從0開始。 end是數組或者字符串的下標，從1開始

• str.slice(1) //sdzxc
• str.slice(1,2) //s
• arr.slice(1) //[2]
• arr.slice(1,3) //[2,3]

那么上面的tableData.slice((currentPage-1)*pagesize,currentPage*pagesize) 就可以理解了
總數據.slice((初始頁-1)每頁顯示的數據,初始頁每頁顯示的數據) 也就是當前的頁碼，然后划分到多少條數據。

如何去更改頁面的時候，頁面跳轉到指定頁呢，這就是page-change中的事件了

<vxe-table border
               height="800"
                ref="xTable"
               :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
               @@cell-dblclick="rowDbClick">
 </vxe-table>

        <vxe-pager
          :current-page="currentPage"
          :page-size="pagesize"
          :total="tableData.length"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
            :page-sizes="pagesizes"
          @@page-change="handleCurrentChange">
        </vxe-pager>

JS數據說明

data 響應式數據

 tableData: [],
 currentPage: 1, //初始頁
                pagesize: 5000,    //    每頁的數據　
                pagesizes: [10, 20, 50, 100, 5000],

methods 方法
在更改頁碼的適合，根據響應式的數據，去動態變化 頁碼

     //更改頁碼變更數據
                handleCurrentChange: function ({ currentPage, pageSize }) {
                    this.currentPage = currentPage;//當前頁
                    this.pagesize = pageSize//每頁顯示的條數
                    //console.log(this.currentPage)  //點擊第幾頁
                },