后台管理项目-分页器的静态实现

page-sizes中的数组在页面中的展示为一个下拉菜单

• page-size要和page-sizes当中的数据对得上才可以,也就是说page-size如果数字没有与page-sizes这个数组里面的数组对应上,那么就会区page-sizes当中的第一个值来计算页码
• 第一种情况：
• page-sizes不填写(注意是page-sizes),则取默认值为 :page-sizes = " [10, 20, 30, 40, 50, 100] "
• 这里填写的 :page-size = “12”,在 :page-sizes = "[10, 20, 30, 40, 50, 100] " 找不到对应的,就忽略page-size设置的值,而去取page-sizes数组当中第一个值,也就是10
• 第二种情况：
• page-size的值在page-sizes没有有对应的值,于是取page-sizes数组当第一个值,也就是3
• 第三种情况
• page-size的值在page-sizes有对应的值,所以可以正常按照我们设置的显示页码

默认的连续页码数是5，奇数是可以保证好看

为了让page-sizes和goto页数都在最右边，可以使用layout调布局，在最右边可以直接使用“->”直接居右显示

 <!-- 
      分页器 
      当前第几页、数据总条数、每一页展示条数、连续页码数
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"

      current-page:代表的是当前第几页
      total：代表分页器一共需要展示数据条数
      page-size：代表的是每一页需要展示多少条数据
      page-sizes：代表可以设置每一页展示多少条数据
      layout：可以实现分页器布局
      pager-count:按钮的数量  如果 9  连续页码是7

    -->
     <el-pagination
     style="margin-top:20px; text-align:center"
     :current-page="6"
     :total="99"
     :page-size="3"
     :page-sizes="[3, 5, 10]"
     layout="prev, pager, next, jumper,->,sizes,total">
     </el-pagination>

连续页码数page-count

如果page-count设置为7，就代表分页器在当前页码中显示的按钮个数，去掉头和尾，中间连续分页数就是5个

分页静态展示图