我們在使用分頁組件的時候可以有兩種方法：

第一種是直接用表格()的自定義:pagination屬性最方便；如下圖所示：

第二種是分頁組件

這里我總結的是第二種方法的使用，由于是 Ant Design Vue 的組件，所以必須安裝Ant Design Vue才能使用，具體的安裝請看官網~

1.添加分頁組件

<div class="seaTable"><a-table :columns="columns" :data-source="roleListArray" bordered :pagination="false"><template v-for="col in ['序號', '聯系人']" :slot="col" slot-scope="text, record, index"><div :key="col"><a-input v-if="record.editable" style="margin: -5px 0" :value="text"@change="e => handleChange(e.target.value, record.key, col)" /><template v-else>{{ text }}</template></div></template><template slot="operation" slot-scope="text, record"><a @click="editShow">修改</a></template></a-table><!-- 分頁 --><div class="pagein"><a-pagination v-model="pages" :total="total" :page-size="rows" show-less-items:show-total="total => `共${total}條數據`" @change="onChangePage" /></div></div>

2.定義所用到的變量和存放數據的數組roleListArray

?3.聯調接口

• vuex配置接口信息

/****角色管理-分頁查詢用戶信息* @param {*} { commit, dispatch }* @param {*} data*/queryUserWithRole ({ commit, dispatch }, data) {const p = new Promise((resolve, reject) => {// get 傳參axios.get('/jiangsu/sys/queryUserWithRole', {params: {page: data.page,rows: data.rows}}).then(res => {const code = res.data.code;const data = res.data.data;const message = res.data.message;if (code === 200) {commit('initqueryUserWithRole', data)if (!data) {messageTips(this._vm.$message, message, 'warn')}resolve(data)}})});return p;}

• 組件頁面調用接口獲取數據

// 初始化，獲取表格數據async getRoleList() {let params = {page: this.pages,rows: this.rows}await this.queryUserWithRole(params).then(res => {console.log(res)this.roleListArray = res.rowsthis.total = res.total})},

4.初始化數據加載

?5.將獲取到的數據遍歷頁面，更改其數據源

?6.更改列名的dataIndex值，保證其與接口中的字段一一對應

?7.效果

在這里需要注意的一點是：

調用接口的時候一定要去更新total值，在發送請求前要更改pages當前頁和rows的值，否則一直是默認值1和5，因為我一開始給定的值就是1和5，值可以更改

總結

以上是生活随笔為你收集整理的antd design vue分页组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。