Pagination 分页

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

基础用法

基础分页。

<template>
  <NPagination
    v-model:currentPage="currentPage"
    :total="100"
    :pageSize="10"
  />
</template>

<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
</script>

显示总数

设置 showTotal 属性来显示总条数。

<template>
  <NPagination
    v-model:currentPage="currentPage"
    :total="100"
    :pageSize="10"
    showTotal
  />
</template>

<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
</script>

调整每页条数

设置 pageSizes 属性来调整每页显示的条数。

<template>
  <NPagination
    v-model:currentPage="currentPage"
    :total="200"
    :pageSize="pageSize"
    :pageSizes="[10, 20, 30, 50]"
    showTotal
    @size-change="handleSizeChange"
  />
</template>

<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
const pageSize = ref(10)

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}
</script>

小型分页

设置 small 属性来使用小型分页。

<template>
  <NPagination
    v-model:currentPage="currentPage"
    :total="100"
    :pageSize="10"
    small
  />
</template>

<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
</script>

带背景色

设置 background 属性来为分页按钮添加背景色。

<template>
  <NPagination
    v-model:currentPage="currentPage"
    :total="100"
    :pageSize="10"
    background
  />
</template>

<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
</script>

禁用状态

设置 disabled 属性来禁用分页。

<template>
  <NPagination
    v-model:currentPage="currentPage"
    :total="100"
    :pageSize="10"
    disabled
  />
</template>

<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
</script>

页码按钮数量

使用 pagerCount 属性来设置页码按钮的数量。

<template>
  <NPagination
    v-model:currentPage="currentPage"
    :total="1000"
    :pageSize="10"
    :pagerCount="7"
    background
  />
</template>

<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
</script>

完整功能

结合所有功能的完整示例。

<template>
  <NPagination
    v-model:currentPage="currentPage"
    :total="total"
    :pageSize="pageSize"
    :pageSizes="[10, 20, 30, 50]"
    :pagerCount="7"
    showTotal
    background
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  />
</template>

<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(200)

const handleCurrentChange = (page) => {
  console.log('当前页:', page)
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  console.log('每页条数:', size)
}
</script>

自定义布局

使用 layout 属性来自定义分页布局。

<template>
  <NPagination
    v-model:currentPage="currentPage"
    :total="100"
    :pageSize="10"
    layout="prev, pager, next, jumper"
    showTotal
  />
</template>

<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
</script>

API

Props

属性	说明	类型	默认值
total	总条数	number	0
pageSize	每页显示条数	number	10
currentPage	当前页数	number	1
pageSizes	每页显示个数选择器的选项列表	number[]	[10, 20, 30, 40, 50, 100]
small	是否使用小型分页样式	boolean	false
background	是否为分页按钮添加背景色	boolean	false
pagerCount	页码按钮的数量	number	7
disabled	是否禁用	boolean	false
layout	组件布局，子组件名用逗号分隔	string	'prev, pager, next, jumper, ->, total'

Events

事件名	说明	类型
update:currentPage	currentPage 改变时触发	(currentPage: number) => void
update:pageSize	pageSize 改变时触发	(pageSize: number) => void
current-change	currentPage 改变时会触发	(currentPage: number) => void
size-change	pageSize 改变时会触发	(pageSize: number) => void
prev-click	用户点击上一页按钮改变当前页后触发	(currentPage: number) => void
next-click	用户点击下一页按钮改变当前页后触发	(currentPage: number) => void

Slots

插槽名	说明
default	自定义内容