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

 
<!-- 分页条 -->
   <pagination
      v-show="total>0"
      :total="total"
      :=""
      :=""
      :pageSizes=""
      @pagination="getList"
    />


<!-- 查询参数 -->
      queryParams: {
        pageNum: 1,
        pageSize: 4,
        pageSizes: [4, 6, 8, 10]
      }


<!-- 若依封装el-pagination -->
ruoyi-ui\src\components\Pagination\

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=" > 0"：用于判断是否存在数据，有这显示，无不显示。

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

:=""：显示当前页码

:=""：显示数据条数

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

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