vue-antd 分頁pagination相關重置問題

1、在data中聲明 pagination變量

      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10, //每頁中顯示10條數據
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50'], //每頁中顯示的數據
        showTotal: (total) => `共有 ${total} 條數據`, //分頁中顯示總的數據
        showQuickJumper: true,
        onShowSizeChange: (current, pageSize) => that.pageSize = pageSize, // 改變每頁數量時更新顯示 
　　 　　// 注：在使用onShowSizeChange方法是需在return{}外聲明個that , let that = this改變this指向問題否則無效
      },

2、在a-table中引入

          <a-table 
            :columns="columns" 
            :data-source="data"
            :pagination="pagination" // 分頁
            :rowKey="record=>record.id" // 唯一值辨認  提高diff算法同時防止不必要的報錯提示
            @change="handleTableChange"   //分頁事件@change
            />

3、 在handleTableChange事件中如果想重值頁碼需要添加字段current ，再要想讓每頁顯示多少條動態生效需要添加pageSize 並重新賦值給data中聲明的pagination 變量

    //分頁事件

    handleTableChange(val, filters, sorter) {
      console.log(val)
      const pager = { ...this.pagination  };
      pager.current = val.current;  // 查看文檔可知current 是改變頁碼數必要字段
      pager.pageSize = val.pageSize;  // 查看文檔可知pageSize是改變動態條數必要字段
      console.log(pager)
      // console.log(filters)
      this.pagination = pager;
      this.refresh(val.current, val.pageSize)  //接口方法根據個人情況具體使用
    },

4、重置生效必須調用handleTableChange（）方法

    //重置
    reset() {
      this.queryParam = {}
      let val = {
        current: 1,
        pageSize: 10
      }
      this.handleTableChange(val)
    },

如有幫助請好評關注：謝謝您的支持