五.分页

前言

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

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

默认

页数少时

共 5 条

• 1

前往

页

页数多时

共 1000 条

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

前往

页

<template>
  <div class="example-pagination-block">
    <div class="example-demonstration">页数少时</div>
    <web-pagination :total="5" />
  </div>
  <div class="example-pagination-block">
    <div class="example-demonstration">页数多时</div>
    <web-pagination :total="1000" />
  </div>
</template>

<style scoped>
.example-pagination-block+.example-pagination-block {
  margin-top: 10px;
}

.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
</style>