五.Pagination

前言

组件默认使用 Flex 布局，不需要手动设置 type="flex"。

请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。

When you have few pages

共 50 条数据

• 1
• 2
• 3
• 4
• 5

When you have more than 7 pages

共 1000 条数据

• 1
• 2
• 3
• 4
• 5
• 6
• 100

<template>
    <div class="example-pagination-block">
      <div class="example-demonstration">When you have few pages</div>
      <web-pagination layout="prev, pager, next" :total="50" />
    </div>
    <div class="example-pagination-block">
      <div class="example-demonstration">When you have more than 7 pages</div>
      <web-pagination layout="prev, pager, next" :total="1000" />
    </div>
  </template>
  
  <style scoped>
  .example-pagination-block + .example-pagination-block {
    margin-top: 10px;
  }
  .example-pagination-block .example-demonstration {
    margin-bottom: 16px;
  }
  </style>