ant-design-vue?table分頁onShowSizeChange后的pageNo怎么解決

本篇內容介紹了“ant-design-vue table分頁onShowSizeChange后的pageNo怎么解決”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

ant-design-vue table分頁onShowSizeChange后的pageNo

onSizeChange 后當前頁問題

首先,大致描述一下出現這個問題的情形:

data(){
     return {
       pagination: {
            pageNo: 1,
            pageSize: 5,
            total:0,
            showSizeChanger: true,
            pageSizeOptions: ['5', '10', '50'],
            showTotal: total => `共 ${total} 條`,
            onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
            onChange:(page,pageSize)=> this.onPageChange(page, pageSize)
        },
      }
  },
methods: {
     onPageChange(page, pageSize) {
      this.pagination.pageNo = page
       this.getList()
   },
   onSizeChange(current, pageSize) {
       this.pagination.pageNo = 1
       this.pagination.pageSize = pageSize
       this.getList()
   }
}

頁面加載數據,pageNo 是 1, pageSize 是 5,假如接口返回 total 是 12,這時分頁有3頁,選擇第2頁,然后改變每頁條數為10,onSizeChange 里面設置了this.pagination.pageNo = 1,但是得到的結果是 當前頁在第2頁.

原因分析

自己百度查找并沒有找到解決的方法,還希望哪個高手給指點下(不知道是不是 antd的bug)

解決方法: 升級 antd 版本

后來看了下官方文檔,發現新的版本 已經舍棄了 pageNo,改用 current,上面的問題在版本升級后也沒再出現,我之前使用的版本是"ant-design-vue": "~1.3.8",現在官網的版本是1.5.3,如果有遇到類似問題的小伙伴可以升級下版本試試.

 onSizeChange(current, pageSize) {
     this.pagination.current= 1
     this.pagination.pageSize = pageSize
     this.getList()
 }

vue AntDesign table分頁

1、<a-table></a-table>標簽中添加屬性 :pagination="pagination"

 2、data中設置pagination和total

data(){
    return {
        totai:0, //總條數
        pagination: {
            current: 1,//頁碼
            pageSize: 10,//條數
            showSizeChanger: true,
            total: this.total,
            pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
            showTotal: (total) => `共 ${total} 條數據`,
            onShowSizeChange: this.pageSizeChange,
            onChange: this.pageChange,
          },
    }
}

3、methods 方法中

methods:{
    pageSizeChange(val, pageNum) {
      this.loading = true
      this.pagination.pageSize = pageNum
      this.pagination.current = 1
      const params = {
        rows: this.pagination.pageSize,
        page: this.pagination.current,
      }
      this.getTemplateLibraryList(params)   //獲取列表數據
    },
    pageChange(page, val) {
      this.loading = true
      this.pagination.current = page
      const params = {
        rows: this.pagination.pageSize,
        page: this.pagination.current,
      }
      this.getTemplateLibraryList(params) //獲取列表數據
    },
}

4、獲取列表數據后

this.data = res && res.hasOwnProperty('rows') ? res.rows : []
this.total = res && res.hasOwnProperty('total') ? res.total : 0
this.pagination.total = this.total

“ant-design-vue table分頁onShowSizeChange后的pageNo怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！