VueJS 前端实现分页功能

Posted 2021-03-03 Alex_Mercer

参考链接

• 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)  //点击第几页
                },