Pagination 分页

一、概述

定义

用于列表、卡片、feed 流等分步加载的组件。

使用场景

• 数据量过大，加载时间过长时，使用分页分解数据
• 快速切换其他数据页面时

类型

• 迷你分页
• 基础分页

二、迷你分页

在空间有限的情况下，通常使用简单的迷你分页。

交互说明

1.当停留在第一页时，上一页按钮置灰，不可点击；当停留在第最后一页时，下一页按钮置灰，不可点击

2.数字不可点击

3.总页数置灰，和选中的分页页面数字产生区分

<se-pagination :total="250" :mini="true" />

三、基础分页

在空间比较大的情况下，可使用基础分页。

交互说明

1.当停留在第一页时，上一页按钮置灰，不可点击；当停留在第最后一页时，下一页按钮置灰，不可点击

2.数字点击跳转到对应的页面，页面数字并被选中。

<style>
  .se-pagination {
    display: inline-block;
    width: 60%;
    margin-left: 40px;
  }
</style>
<p>
  <se-pagination :total="50" @change="pageChange" />
</p>
<script>
  export default {
    methods: {
      pageChange(pn) {
        console.log(pn)
      }
    }
  }
</script>

Props

Events