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
                });
            },
        }