纯前端完成分页

本文采用vue2项目距离说明，如何实现前端分页需求：

1.首先在结构中确定分页器组件

  <MyPagination :total="pageTotalss" :pageSize="pageSizess" @pageChange="pageChanges">
                            </MyPagination>

2.在data中定义响应式数据

  currentPagess: 1, //  分页当前页码
            pageSizess: 6, //  每页显示条数 可以在这修改 
            pageTotalss: 0, // 一共条数

3.在计算属性中处理数据

 filteredData() {
          
                // 分页
                // return this.dataArray; // 不过滤的情况下，分页显示所有数据
                let start = (this.currentPagess - 1) * this.pageSizess
                let end = start + this.pageSizess
                this.pageTotalss = this.dataArray.length
                return this.dataArray.slice(start, end)      

        },

4.在methods中注册相关方法

 pageChanges(pageSize, currentPage) {
            this.pageSizess = pageSize
            this.currentPagess = currentPage
        },