ant design vue中表格自带分页

ant design vue中表格里面自带分页，目前使用的是远程加载数据的形式。

需要注意的是一定要设置total

 

 

          <a-table
                :columns="columns"
                :data-source="tableData"
                :row-key="record => record.id"
                :pagination="pagination"
                :loading="loading"
                :scroll="scroll"
                @change="handleTableChange"
                tableLayout="fixed"
                class="table-wrapper"
            >

                     </a-table>

　　

      data() {
            return {
                size: 'small',
                from:{},
                tableData: [], 
                columns,
                status: [],
                //分页栏
                pagination: {
                    position:'bottom',
                    pageSize: 10,
                    current: 1,
                    total: 0
                },            
                //表格数据是否正在加载
                loading: false,
                //表格表头筛选条件
                filteredInfo: null,
                //表格表头排序条件
                sortedInfo: null,
                //表格选中行
                selectedRowKeys: [],
                //表格横向与纵向宽度
                //设置表格锁定表头和列时必须设置此配置
                scroll: {
                    x: 2000,
                    y: "calc(100vh - 450px)",
                },
            }
        },
      methods: {
            //表格刷新
            refreshTableData(e){
                if (e) {
                    e.preventDefault();
                    this.pagination.current = 1;
                }
                let that = this;
                let pagination = that.pagination|| {}
                let sorter = that.sortedInfo|| {}
                let formData = {...that.form}
                that.fetch({
                    pageSize: pagination.pageSize,
                    pageNumber: pagination.current,
                    ...formData 
                })
            },
            //表格分页条件、筛选条件、排序条件发生变化后刷新表格数据
            handleTableChange(pagination, filters, sorter) {
                console.log(pagination, 'pagination');
                let that = this;
                that.sortedInfo = sorter;
                const pager = { ...that.pagination };
                pager.current = pagination.current;
                that.pagination = pager;
                that.refreshTableData()

            },
            //表格渲染
            fetch(params = {}) {
                console.log('params:', params);
                this.loading = true;
                publicapi.getfindAllByLimit(params).then(data => {
                    const pagination = { ...this.pagination };
                    this.loading = false;
                    this.pagination.total = data.preProjectData.totalElements;
                    this.tableData.splice(0, this.tableData.length);
                    this.tableData = data.preProjectData.content
                });
            },
        }