Vue中分页组件的用法

「已注销」

于 2022-03-24 15:50:32 发布

阅读量1.1k

点赞数

分类专栏： Vue模板开发 vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/C___man/article/details/123713165

版权

Vue模板开发同时被 2 个专栏收录

4 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何使用和实现分页组件，包括分页的方法和涉及的参数设置，帮助开发者更好地进行数据展示和用户体验的优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分页组件

<el-pagination
    @size-change="handleSizeChange"
    :prev-text="$t('pages.previousPage')"
    :next-text="$t('pages.nextPage')"
    @current-change="handleCurrentChange"
    :current-page="queryPageParams.pageNum"
    :page-sizes="queryPageSizes"
    :page-size="queryPageParams.pageSize"
    :layout="layout"
    :total="queryPageParams.total"
    background
  >
  <button
    type="button"
    @click="handleCurrentChange(1)"
    class="btn-prev el_pagination_firstPage"
  >
    {{ $t("pages.firstPage") }}
  </button>
  <button
    type="button"
    @click="handleCurrentChange(Math.ceil(queryPageParams.total / queryPageParams.pageSize))"
    class="btn-prev el_pagination_lastPage"
  >
    {{ $t("pages.lastPage") }}
  </button>
</el-pagination>

分页方法

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

分页参数

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