AntDesign vue學習筆記（八）Table服務端分頁使用

本文是AntDesign后端分頁方法

1、設置pagination

 <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" :pagination="pagination">
     <a slot="action" href="javascript:;">查看</a>
     <img  style="width:20px;heigth:20px" slot="pic" slot-scope="text" :src=text />
  </a-table>

2、自定義pagination，注意寫成onChange,change不行，灰色部分請根據自己實際代碼修改。

  data () {
    let self = this
    return {
      collapsed: false,
      data, sels, columns, rowSelection,
      pagination: {
        pageNo: 1,
        pageSize: 20, // 默認每頁顯示數量
        showSizeChanger: true, // 顯示可改變每頁數量
        pageSizeOptions: ['10', '20', '50', '100'], // 每頁數量選項
        showTotal: total => `Total ${total} items`, // 顯示總數
        onShowSizeChange: (current, pageSize) => this.pageSize = pageSize, // 改變每頁數量時更新顯示
        onChange:(page,pageSize)=>self.changePage(page,pageSize),//點擊頁碼事件
        total:0 //總條數
       }
    }
  },

3、Ajax讀取數據列表時pagination.total賦總條數即可

.then((response) => {
          that.data = response.data.items
         that.pagination.total=response.data.totalNum
          console.log(response)
        })

4、這樣就會自動分頁了

5、讀取數據時帶上當前頁、分頁大小，過濾條件，后端代碼可以簡單使用通用分頁方法返回Json數據即可，

    searchUser () {
      let filter= {userName:this.queryParam.userName,curPage:this.pagination.pageNo,pageSize:this.pagination.pageSize};
      console.log(filter) 
      this.getUser(filter)
    },

getUser是Post和讀取返回數據的方法，不再粘貼

6、在SizeChange、Change、搜索按鈕事件里調用searchUser方法就可以了。