分页

基础用法

• 示例：

点击查看代码

<template>
  <div>
    <ZPagination v-model:current="current1" :total="50" />
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const current1=ref(3)
    return {
      current1
    }
  },
})
</script>

更多分页

• 示例：

点击查看代码

<template>
  <ZPagination
    v-model:current="current"
    v-model:pageSize="pageSize"
    show-size-changer
    @showSizeChange="onShowSizeChange"
    :total="total"
  >
  </ZPagination>
</template>
<script>
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    setup() {
      const current = ref(2)
      const total = ref(500)
      const pageSizeRef = ref(10)
      const onShowSizeChange = (current, pageSize) => {
      console.log(current, pageSize);
    }
      return {
        current,
        total,
        pageSize: pageSizeRef,
        onShowSizeChange
      }
    }
  })
</script>
    

简单版本

• 示例：

点击查看代码

<template>
  <div>
    <ZPagination v-model:current="current" :total="50" simple />
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const current=ref(2)
    return {current}
  },
})
</script>

跳转版本

• 示例：

点击查看代码

<template>
  <div>
    <ZPagination v-model:current="current" :total="50" show-quick-jumper />
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const current=ref(2)
    return {current}
  },
})
</script>

参数

参数	说明	类型	默认值
current(v-model)	当前页数	number	1
pageSize(v-model)	每页条数	number	-
pageSizeOptions	指定每页可以显示多少条	array	['10', '20', '50', '100']
showLessItems	是否显示较少页面内容	boolean	false
showQuickJumper	是否可以快速跳转至某页	boolean	false
total	数据总数	number	0
defaultPageSize	默认的每页条数	number	10
hideOnSinglePage	只有一页时是否隐藏分页器	boolean	false
showSizeChanger	是否可以改变 pageSize	boolean	false
simple	当添加该属性时,显示为简单分页	boolean	-

事件

事件	说明	回调参数
showSizeChange	pageSize 变化的回调	Function(current, size)
change	页码改变的回调,参数是改变后的页码及每页条数	Function(page, pageSize)