分页

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

用例

Pagination displays all pages if parent container is big enough.

API

v-pagination
名称
circle
默认值
false
类型
boolean

Components.Paginations.

名称
color
默认值
undefined
类型
string

将指定的色彩应用与控件

名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
disabled
默认值
false
类型
boolean

Components.Paginations.

名称
length
默认值
0
类型
number

Components.Paginations.

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
next-icon
默认值
'$vuetify.icons.next'
类型
string

Components.Paginations.

名称
prev-icon
默认值
'$vuetify.icons.prev'
类型
string

Components.Paginations.

名称
total-visible
默认值
undefined
类型
number | string

Components.Paginations.

名称
value
默认值
0
类型
number

控制可见性

示例

长的

当页面按钮的水浪超过父容器时,组件将截断列表。

限制

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

圆形

分页的另一种分割是圆形页面按钮

Icons

Previous and next page icons can be customized with prev-icon and next-icon props.

禁用

分页按钮可以手动禁用。

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore