Ant Design 是一款優秀的UI組件庫，它提供了一系列高質量的 Vue 組件。其中，Ant Design Vue 的分頁組件極為實用，為了更好地使用它，本文將介紹如何使用 Ant Design Vue 分頁組件。

首先，需要安裝 Ant Design Vue 組件庫，可以使用 npm 或者 yarn 命令進行安裝：

npm install ant-design-vue
# 或者
yarn add ant-design-vue

接著，在需要使用分頁組件的頁面中引入組件：

// 導入組件
import { Pagination } from 'ant-design-vue';
export default {
components: {
Pagination // 注冊組件
}
};

在頁面結構中加入分頁組件：

<template>
<div>
<!-- 正文 -->
<!-- 分頁 -->
<pagination
:current="currentPage"
:total="total"
:showTotal="showTotal"
:showSizeChanger="true"
:pageSize="pageSize"
:pageSizeOptions="[10, 20, 30, 40]"
@change="handleChangePage"
@showSizeChange="handleShowSizeChange"
/>
</div>
</template>

注：以上代碼中，current 表示當前頁數，total 表示總條目數，showTotal 表示每頁顯示總條目數和總頁數的文本內容，showSizeChanger 表示是否顯示每頁顯示條數的下拉框，pageSize 表示每頁顯示條目數，pageSizeOptions 表示每頁顯示條數的選擇集合（默認[10,20,30,40]），@change 表示頁碼變化時的回調方法，@showSizeChange 表示每頁顯示條數變化時的回調方法。

最后，在組件實例中添加回調方法即可實現分頁功能：

// 回調方法
methods: {
handleChangePage(currentPage) {
console.log(currentPage);
},
handleShowSizeChange(currentPage, pageSize) {
console.log(currentPage, pageSize);
}
}

以上就是如何使用 Ant Design Vue 分頁組件的內容，希望能對大家有所幫助。