Pagination 分页器

基础用法

1

2

3

4

5

6

...

10

<vp-pagination :total="100" :current-page.sync="currentPage1" />

<script>
  export default {
    data() {
      return {
        currentPage1: 1,
      };
    },
  };
</script>

修改按钮内容

前一页

1

2

3

4

5

6

...

10

后一页

<vp-pagination :total="100" :current-page.sync="currentPage2" :prev-text="'前一页'" :next-text="'后一页'" />

<script>
  export default {
    data() {
      return {
        currentPage2: 1,
      };
    },
  };
</script>

修改布局

1

2

3

4

5

6

...

10

前往

页

<vp-pagination :total="100" :current-page.sync="currentPage2" :layout="'jumper'" />

<script>
  export default {
    data() {
      return {
        currentPage3: 1,
      };
    },
  };
</script>

当只有一页时隐藏分页

#0

1

<vp-pagination :total="100" :current-page.sync="currentPage2" :layout="'jumper'" />

<script>
  export default {
    data() {
      return {
        currentPage4: 1,
        switchValue: false,
      };
    },
  };
</script>

Pagination Attributes

参数	说明	默认值	可选值
total	总条目数	——	——
current-page	当前页数，支持 .sync 修饰符	1	——
layout	组件布局	——	'jumper'
hide-on-single-page	只有一页时是否隐藏	false	true/false
prev-text	替代图标显示的上一页文字	——	——
next-text	替代图标显示的下一页文字	——	——

Events

事件名称	说明	回调参数
current-change	currentPage 改变时会触发	当前页
prev-click	用户点击上一页按钮改变当前页后触发	当前页
next-click	用户点击下一页按钮改变当前页后触发	当前页