element-ui 使用Pagination 进行分页

Template

<el-pagination
    class="pagination"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
    :current-page="currentPage"
    :page-size="pageSize"
    :page-sizes="pageSizes"
    background
    layout="sizes, prev, pager, next, jumper"
    :total="reportedNum">
</el-pagination>

Data

data() {
    return {
        currentPage: 1, //当前页码
        pageSize: 1, // 默认每页显示个数
        pageSizes:[1,2,3,4], // 个数选择器
        reportedNum: 0, // 总数
    }
}

Methods

// 显示第几页
handleCurrentChange (val) {
    // 改变默认的页码
    this.currentPage = val
    // 请求分页数据
    this.getAnswers((val - 1)*(this.pageSize), this.pageSize)
}

// 每页显示的条数
handleSizeChange(val) {
    // 改变每页显示的条数
     this.pageSize = val
    // 请求第一页数据
    this.getAnswers(0, val)
    // 将页码显示到第一页
    this.currentPage=1
}

// 获取答案
getAnswers (offset, limit) {
     ........
}

效果图