Pagination 分页

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

基础用法

total表示总条目数，size用于设置每页显示的页码数量

1

2

3

4

5

跳至

Details

<template>
   <a-pagination total="50" :current-page="currentPage" @page-change="pageChange"/>
</template>

<script setup>
import { ref } from 'vue';
const currentPage = ref(1)
const pageChange = (page)=>{
    currentPage.value = page
}
</script>

带有背景色的分页

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

1

2

3

4

5

跳至

Details

<template>
    <a-pagination total="50" :current-page="currentPage" @page-change="pageChange" background/>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 const currentPage = ref(1)
 const pageChange = (page)=>{
     currentPage.value = page
 }
 </script>

更改每页显示条目个数

设置showSizeChanger为true可以更改每页显示条目个数

Total 60

1

2

3

4

5

6

7

8

9

跳至

Details

<template>
    <a-pagination showTotal total="60" :pageSize="7" :current-page="currentPage" @page-change="pageChange" background  showSizeChanger/>
 </template>
 <script setup>
 
 import { ref } from 'vue';
 const currentPage = ref(1)
 const pageChange = (page)=>{
     currentPage.value = page
 }
 </script>

跳转至指定页码

设置showQuickJumper为true可以跳转至指定页码

Total 60

1

2

3

4

5

6

跳至

Details

<template>
    <a-pagination class="vp-raw" showTotal total="60" :current-page="currentPage" @page-change="pageChange" background  showSizeChanger showQuickJumper/>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
 const currentPage = ref(1)
 const pageChange = (page)=>{
     currentPage.value = page
 }
 </script>