Pagination 分页

介绍

数据量过多时，采用分页的形式将数据分隔，每次只加载一页。

基础用法

通过 v-model 来绑定当前页码。

<vd-pagination v-model="pager.page" :total="pager.total" />

const pager = reactive({
  page: 1,
  total: 100,
});

展示省略号

通过 show-ellipsis 属性来控制显示省略号，点击后可以快速跳转。通过 ellipsis-jump 属性可控制省略号跳转页码数。

<vd-pagination
  v-model="pager.page"
  :total="pager.total"
  show-ellipsis
  ellipsis-jump="3"
/>

const pager = reactive({
  page: 1,
  total: 100,
});

展示分页信息

通过 show-message 属性来控制显示分页信息。

<vd-pagination
  v-model="pager.page"
  :total="pager.total"
  show-message
/>

const pager = reactive({
  page: 1,
  total: 100,
});

展示类型

通过 type 属性设置分页器的类型，可选值为 pages、simple，默认为 pages。

<vd-pagination
  v-model="pager.page"
  :total="pager.total"
  type="simple"
/>

const pager = reactive({
  page: 1,
  total: 100,
});

自定义文案

通过 prev-text、next-text 属性自定义上一页、下一页按钮文字。

<vd-pagination
  v-model="pager.page"
  :total="pager.total"
  prev-text="上一页"
  next-text="下一页"
/>

const pager = reactive({
  page: 1,
  total: 100,
});

自定义按钮

通过 prev、next 插槽自定义上一页、下一页按钮图标。

<vd-pagination v-model="pager.page" :total="pager.total">
  <template #prev><vd-icon name="arrow-left" /></template>
  <template #next><vd-icon name="arrow-right" /></template>
</vd-pagination>

const pager = reactive({
  page: 1,
  total: 100,
});

API

Props

参数	说明	类型	默认值
v-model	当前页数	string	-
type	分页展示类型，可选值为 pages simple	PaginationType	pages
total	总数据个数	number | string	-
page-size	每页显示数据个数	number | string	10
page-count	总页数，如已设置 total 和 pageSize，该项将忽略	number | string	-
page-limit	页码最大展示按钮个数	number | string	5
prev-text	上一页按钮文字	string	-
next-text	下一页按钮文字	string	-
ellipsis-jump	省略号跳转页码数	number | string	3
show-ellipsis	是否展示省略号	boolean	false
show-message	是否展示分页信息	boolean	false
hide-on-single-page	只有一页时是否隐藏	boolean	false

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	页码改变时触发	number

Slots

名称	说明
default	自定义内容
prev	上一页按钮
next	下一页按钮
pager	页码按钮
index	简单展示时的页码
message	分页信息内容