Minimalist UI

Pagination 分页

引入组件

<template>
  <m-pagination :total="20"></m-pagination>
</template>

<script>
  import { MPagination } from "@csr/m_ui";

  export default {
    components: {
      MPagination
    }
  }
</script>

基础用法

页数较少时的效果

页数较多时的效果

代码
<div>
  <p>页数较少时的效果</p>
  <m-pagination :total="7"></m-pagination>
  <p>页数较多时的效果</p>
  <m-pagination :total="100"></m-pagination>
</div>

默认页码

代码
<div>
  <p>设置默认页码为20</p>
  <m-pagination :total="100" :default-page="20"></m-pagination>
</div>

改变点击...切换的页数

代码
<div>
  <p>设置每次点击...切换10页</p>
  <m-pagination :total="100" :step="10"></m-pagination>
</div>

每页条数

代码
<div>
  <p>每页条数为10</p>
  <m-pagination :total="100" :page-size="10"></m-pagination>
</div>

API

属性说明类型默认值
total 页码总数量，必传 number
default-page 默认选中页码，支持.sync修饰符 number 1
page-size 每页条数 number 7
step 点击...按钮切换页码的数量 number 5

事件

事件名 说明 回调参数
on-change 选中页码改变时触发 当前页码: number,
当前页码在展示的页码中的下标：number

← Table 表格 →