ant-design-vue Table pagination 分页器的使用

一、实际效果

效果图：

一、页面代码

<a-table :columns="columns" :data-source="tableData" :rowSelection="rowSelection" :pagination="pagination" @change="tableChange" rowKey="schedule_guid"></a-table>

在这里重点讲的是这个pagination属性和change方法的绑定，所以其他代码咱们就不细讲了。

二、data中的属性和methods中的方法

pagination:{
                total:0,
                defaultPageSize:10,
                showTotal: total => `共 ${total} 条数据`,
                showSizeChanger:true,
                pageSizeOptions: ['5', '10', '15', '20'],
                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize
            },

total：默认的总条数，在从后台获取数据列表成功之后对其进行赋值。
defaultPageSize：默认每页的显示条数。
showSizeChanger:是否可以改变 pageSize,布尔值，一般情况设置为true。
pageSizeOptions：可选的页面显示条数。
onShowSizeChange：pageSize 变化的回调，可以拿到当前的页数和pageSize，直接再将其赋值给pagination即可。

---

tableChange(e){
            let queryData = {
                current_page:e.current,//当前页数
                per_page:e.pageSize//每页显示条数
            };
            // 合并原有的筛选条件，这样才能在原有的基础上进行分页
            Object.assign(queryData,this.queryData)
            this.getTableInfo(queryData)
        },

这个方法的回调包含了我们想要的值，可以查看打印结果如下：

我的需求是，可以进行模糊查询（条件筛选），然后在模糊查询的基础上再进行分页，只要我在进行模糊查询前，都将模糊查询的条件保存在data中，再进行分页的时候，将分页的条件和模糊查询的条件进行合并，在进行数据表格的获取，这样即可实现在模糊查询的基础上进行分页。