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

 
<!-- 分页条 -->
   <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]
      }
    },
...

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

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

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

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

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

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