Vue中分页组件的用法

分页组件

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="queryPageParams.pageNum"
  :page-sizes="queryPageSizes"
  :page-size="queryPageParams.pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="queryPageParams.total"
>
</el-pagination>

分页方法

// 改变每页数据量（size）
handleSizeChange(val) {
  this.queryPageParams.pageSize = val;
},
// 改变页数 （num）
handleCurrentChange(val) {
  this.queryPageParams.pageNum = val;
},

分页参数

// 查询结果分页参数
queryPageParams: {
  pageNum: 1,
  pageSize: 5,
  total: 20,
},
queryPageSizes: [5, 10, 20, 50],