Pagination 分页

当数据量过多时，使用分页分解数据。

基本用法

通过 v-model 来绑定当前页码，total设置总条数，page-size设置一页展示条数，默认为10条，总页数通过total和page-size自动计算。

<wd-pagination v-model="value" @change="handleChange" />

const value = ref<number>(1)
function handleChange({ value }) {
  console.log(value)
}

Icon图标

设置 show-icon 属性，将分页导航展示为Icon图标。

<wd-pagination v-model="value" @change="handleChange" show-icon ></wd-pagination>

文字提示

设置 show-message 属性，展示文字提示。

<wd-pagination 
  v-model="value" 
  :total="total" 
  :page-size="page" 
  @change="handleChange" 
  show-icon 
  show-message
/>

Attributes

参数	说明	类型	可选值	默认值	最低版本
v-model	绑定值	number	-	-	-
prev-text	上一页按钮文字	string	-	上一页	-
next-text	下一页按钮文字	string	-	下一页	-
total-page	总页数，如果有total，则优先使用total计算页数	number	-	根据页数计算	-
page-size	分页大小	number	-	10	-
total	总数据个数	number	-	-	-
show-icon	是否展示分页Icon	boolean	-	false	-
show-message	是否展示文字提示	boolean	-	false	-
hide-if-one-page	总页数只有一页时是否隐藏	boolean	-	true	-

Events

事件名称	说明	参数	最低版本
change	值修改事件	{ value },value为当前值

外部样式类

类名	说明	最低版本
custom-class	根节点样式	-

源代码

文档

• 组件