我们在使用分页组件的时候可以有两种方法：
第一种是直接用表格()的自定义: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，值可以更改
