分页

v-pagination 组件用于分离长数据集，以便用户更容易地使用信息。根据提供的长度，分页组件将自动伸缩。要维护当前页面，只需提供一个 v-model 属性。

用例

默认情况下，分页显示基于设置的 length 属性的页面数，并带有 prev 和 next 按钮，以帮助您导航。

template script

<template>
  <div class="text-center">
    <v-pagination
      v-model="page"
      :length="6"
    ></v-pagination>
  </div>
</template>

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

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

实战场

template script

<template>
  <div class="text-center">
    <v-row justify="center" align="center">
      <v-col cols="12">
        <v-radio-group row wrap>
          <v-switch v-model="circle" label="Toggle circle" class="mx-4"></v-switch>
          <v-switch v-model="disabled" label="Toggle disabled" class="mx-4"></v-switch>
        </v-radio-group>
      </v-col>
      <v-row>
        <v-col cols="12" md="3">
          <v-select
            v-model="prevIcon"
            class="mx-4"
            :items="prevIcons"
            label="prev-icon"
          ></v-select>
        </v-col>
        <v-col cols="12" md="3">
          <v-select
            v-model="nextIcon"
            class="mx-4"
            :items="nextIcons"
            label="next-icon"
          ></v-select>
        </v-col>
        <v-col cols="12" md="3">
          <v-text-field
            v-model="length"
            label="Pagination length"
            max="25"
            min="1"
            step="1"
            style="width: 125px"
            type="number"
            @keydown="false"
          ></v-text-field>
        </v-col>
        <v-col cols="12" md="3">
          <v-text-field
            v-model="totalVisible"
            label="Total visible"
            max="25"
            min="1"
            step="1"
            style="width: 125px"
            type="number"
            @keydown="false"
          ></v-text-field>
        </v-col>
      </v-row>
    </v-row>
    <v-pagination
      v-model="page"
      :circle="circle"
      :disabled="disabled"
      :length="length"
      :next-icon="nextIcon"
      :prev-icon="prevIcon"
      :page="page"
      :total-visible="totalVisible"
    ></v-pagination>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        circle: false,
        disabled: false,
        length: 10,
        nextIcon: 'navigate_next',
        nextIcons: ['mdi-chevron-right', 'mdi-arrow-right', 'mdi-menu-right'],
        prevIcon: 'navigate_before',
        prevIcons: ['mdi-chevron-left', 'mdi-arrow-left', 'mdi-menu-left'],
        page: 1,
        totalVisible: 10,
      }
    },
  }
</script>

示例

下面是一些简单到复杂的例子。

长的

使用 length 属性，您可以设置 v-pagination 的长度，如果页面按钮的数量超过父容器，它将截断列表。

template script

<template>
  <div class="text-center">
    <v-container>
      <v-row justify="center">
        <v-col cols="8">
          <v-container class="max-width">
            <v-pagination
              v-model="page"
              class="my-4"
              :length="15"
            ></v-pagination>
          </v-container>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

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

限制

您可以用total-visible属性手动设置可见页面按钮的最大数量。

template script

<template>
  <div class="text-center">
    <v-pagination
      v-model="page"
      :length="15"
      :total-visible="7"
    ></v-pagination>
  </div>
</template>

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

圆形

circle 属性为您提供了分页按钮的另一种样式。

template script

<template>
  <div class="text-center">
    <v-pagination
      v-model="page"
      :length="4"
      circle
    ></v-pagination>
  </div>
</template>

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

Vuetify Discord

Get help with an issue, report a bug or connect with other developers on Discord

ads by Vuetify

](https://community.vuetifyjs.com?ref=vuetifyjs.com)

图标

上一页和下一页的图标可以使用 prev-icon 和 next-icon 属性定制。

template script

<template>
  <div class="text-center">
    <v-pagination
      v-model="page"
      :length="4"
      prev-icon="mdi-menu-left"
      next-icon="mdi-menu-right"
    ></v-pagination>
  </div>
</template>

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

禁用

分页项可以使用 disabled 属性手动停用。

template

<template>
  <div class="text-center">
    <v-pagination
      :length="3"
      disabled
    ></v-pagination>
  </div>
</template>