我們?cè)谑褂梅猪摻M件的時(shí)候可以有兩種方法：

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

第二種是分頁組件

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

1.添加分頁組件

<div class="seaTable"><a-table :columns="columns" :data-source="roleListArray" bordered :pagination="false"><template v-for="col in ['序號(hào)', '聯(lián)系人']" :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}條數(shù)據(jù)`" @change="onChangePage" /></div></div>

2.定義所用到的變量和存放數(shù)據(jù)的數(shù)組roleListArray

?3.聯(lián)調(diào)接口

• 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;}

• 組件頁面調(diào)用接口獲取數(shù)據(jù)

// 初始化，獲取表格數(shù)據(jù)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.初始化數(shù)據(jù)加載

?5.將獲取到的數(shù)據(jù)遍歷頁面，更改其數(shù)據(jù)源

?6.更改列名的dataIndex值，保證其與接口中的字段一一對(duì)應(yīng)

?7.效果

在這里需要注意的一點(diǎn)是：

調(diào)用接口的時(shí)候一定要去更新total值，在發(fā)送請(qǐng)求前要更改pages當(dāng)前頁和rows的值，否則一直是默認(rèn)值1和5，因?yàn)槲乙婚_始給定的值就是1和5，值可以更改

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。