快捷導(dǎo)航

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

更新時間：2023年04月21日 09:31:59 作者：dengfenglai825

這篇文章主要介紹了ant-design-vue table分頁onShowSizeChange后的pageNo的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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

onSizeChange 后當前頁問題

首先,大致描述一下出現(xiàn)這個問題的情形:

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()
? ?}
}

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

原因分析

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

解決方法: 升級 antd 版本

后來看了下官方文檔,發(fā)現(xiàn)新的版本已經(jīng)舍棄了 pageNo,改用 current,上面的問題在版本升級后也沒再出現(xiàn),我之前使用的版本是"ant-design-vue": "~1.3.8",現(xiàn)在官網(wǎng)的版本是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中設(shè)置pagination和total

data(){
    return {
        totai:0, //總條數(shù)
        pagination: {
            current: 1,//頁碼
            pageSize: 10,//條數(shù)
            showSizeChanger: true,
            total: this.total,
            pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
            showTotal: (total) => `共 ${total} 條數(shù)據(jù)`,
            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)   //獲取列表數(shù)據(jù)
    },
    pageChange(page, val) {
      this.loading = true
      this.pagination.current = page
      const params = {
        rows: this.pagination.pageSize,
        page: this.pagination.current,
      }
      this.getTemplateLibraryList(params) //獲取列表數(shù)據(jù)
    },
}

4、獲取列表數(shù)據(jù)后

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