shop-wx/doc/wot-design-uni/docs/component/pagination.md

1.8 KiB
Raw Blame History

Pagination 分页

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

基本用法

通过 v-model 来绑定当前页码,total设置总条数,page-size设置一页展示条数默认为10条总页数通过totalpage-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 根节点样式 -