antd design vue分页组件

我们在使用分页组件的时候可以有两种方法：

第一种是直接用表格()的自定义: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.rows
                    this.total = res.total
                })
            },

4.初始化数据加载

 5.将获取到的数据遍历页面，更改其数据源

 6.更改列名的dataIndex值，保证其与接口中的字段一一对应

 7.效果

在这里需要注意的一点是：

调用接口的时候一定要去更新total值，在发送请求前要更改pages当前页和rows的值，否则一直是默认值1和5，因为我一开始给定的值就是1和5，值可以更改