Pagination 分页

采用分页的形式分隔长列表，每次只加载一个页面。

何时使用

• 当加载/渲染所有数据将花费很多时间时；
• 可切换页码浏览数据。

组件演示

基本

基础分页。

<template>
  <v-pagination v-model="value" @change="loadPage"
      :total="50">
  </v-pagination>
</template>
<script>
export default {
    methods: {
        loadPage(i) {
            console.log('cb' + i);
        }
    }
}
</script>

更多

更多分页。

<template>
  <v-pagination :total="500"></v-pagination>
</template>

改变

改变每页显示条目数。

<template>
  <v-pagination show-size-changer @sizechange="pageSizeChange" :total="50"></v-pagination>
</template>
<script>
export default {
    methods: {
        pageSizeChange(current, size) {
            console.log(current, size);
        }
    }
}
</script>

跳转

快速跳转到某一页。

<template>
  <v-pagination show-quick-jumper :total="500"></v-pagination>
</template>

迷你

迷你版本。

<template>
  <v-pagination
      size="small"
      :total="50">
  </v-pagination>
  <br>
  <v-pagination
      :value="value"
      :total="100"
      :default-page-size="5"
      :page-size="10"
      @change="loadPage"
      show-size-changer
      @sizechange="pageSizeChange"
      show-quick-jumper
      size="small"
      :simple="false">
  </v-pagination>
  <br>
  <v-pagination
      :value="value"
      :total="50"
      :default-page-size="5"
      :page-size="10"
      @change="loadPage"
      size="small"
      :simple="false"
      :show-total="showTotal">
  </v-pagination>
</template>

简洁

简单的翻页。

<template>
  <v-pagination simple></v-pagination>
  <v-pagination simple :total="500"></v-pagination>
</template>

受控

受控制的页码。

<template>
  <v-pagination :value="3" :total="50"></v-pagination>
</template>

总数

通过设置 showTotal 展示总共有多少数据。

<template>
  <v-pagination :show-total="showTotal" :total="50"></v-pagination>
  <br>
  <v-pagination :show-total="showTotal2" :total="50"></v-pagination>
</template>
<script>
export default {
    methods: {
        showTotal(total) {
            return `全部 ${total} 条`;
        },
        showTotal2(total, pages) {
            return `1-${pages} 全部 ${total} 条`;
        }
    }
}
</script>

API

Pagination Props

Pagination Events