【前端】若依框架学习笔记——分页(自定义选择每页条数)

v-show="queryParams.total > 0"：用于判断是否存在数据，有这显示，无不显示。

:total="queryParams.total"：显示数据总条数

:page.sync="queryParams.pageNum"：显示当前页码

:limit.sync="queryParams.pageSize"：显示数据条数

:pageSizes="queryParams.pageSizes": 选择每页条数

@pagination="getLists"：处理页码大小和当前页变动时候触发的事件

————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/weixin_42748454/article/details/132467507

<!-- 分页条 -->

  <pagination

      v-show="total>0"

      :total="total"

      :page.sync="queryParams.pageNum"

      :limit.sync="queryParams.pageSize"

      :pageSizes="queryParams.pageSizes"

      @pagination="getList"

    />

<!-- 查询参数 -->

      queryParams: {

        pageNum: 1,

        pageSize: 4,

        pageSizes: [4, 6, 8, 10]

      }

<!-- 若依封装el-pagination -->

ruoyi-ui\src\components\Pagination\index.vue

export default {

  name: 'Pagination',

  props: {

    total: {

      required: true,

      type: Number

    },

    page: {

      type: Number,

      default: 1

    },

    limit: {

      type: Number,

      default: 20

    },

    pageSizes: {

      type: Array,

      default() {

        return [10, 20, 30, 50]

      }

    },

...