自定义分页功能的实现

<view class="btm">
            <view class="elpage ">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[8, 8, 8, 8]" :page-size="8" layout="total,  prev, next"
                    :total="list.length">
                </el-pagination>
              <p>{{currentpage}}/ <span style="color: #2B7E69; padding-left:1px">{{list.length/8}}</span></p>
                
            </view>

        </view>

展示图：

data部分

 currentPage4: 4,
total: 0, //总数据条数
currentpage: 1, //当前所在页默认是第一页
pagesize: 8, //每页显示多少行数据 默认设置为10
ticket: [], //这里是从后端获取的所有数据
pageTicket: [], //分页后的当前页数据

methods: {
// 获取当前页的数据信息
getPageInfo() {
//清空pageTicket中的数据
this.pageTicket = [];
// 获取当前页的数据
for (let i = (this.currentpage - 1) * this.pagesize; i < this.total; i++) {
//把遍历的数据添加到pageTicket里面
this.pageTicket.push(this.ticket[i]);
//判断是否达到一页的要求
if (this.pageTicket.length === this.pagesize) break;
}
},
//分页时修改每页的行数,这里会自动传入一个size
handleSizeChange(size) {
//修改当前每页的数据行数
this.pagesize = size;
//数据重新分页
this.getPageInfo();
},
//调整当前的页码
handleCurrentChange(pageNumber) {
//修改当前的页码
this.currentpage = pageNumber;
//数据重新分页
this.getPageInfo()
}
}