quasar table 取server資料 分頁使用

1.元件設定
  1.rows-per-page-options：設定option供選擇每頁顯示幾筆(對應rowsPerPage)
  2.pagination: 對應分頁設定
  3.@request:當在分頁物件上按上下頁或是切換每頁顯示幾筆都會被觸發的handler
    handler接收到的參數props並非現在物件上的pagination設定值
    而是要變成的pagination

<q-table
  :data="items"
  :rows-per-page-options="[50,100]"
  :pagination.sync="pagination"
  @request="onRequest"
>

2.script
  1.設定pagination物件
    page: 目前第幾頁 要操作載下一頁 需要將第幾頁更新回這裡
    rowsPerPage: 每頁幾筆,當在元件操作切換要顯示的數量，要寫回這裡
    rowsNumber: 總筆數，這要由server取得的資料來更新
  2.doQuery真正執行server查詢的function
    在執行真正查詢所需要的分頁參數 ex取第二頁資料
    這些值都是由pagination設定值拿來當作參數
    pagination設定值會因為元件的操作而動態變化
  3.設定的onRequest handler
    當在分頁物件上按上下頁或是切換每頁顯示幾筆都會被觸發的handler
    handler接收到的參數props並非現在物件上的pagination設定值
    而是要變成的pagination
    要將取得的資料寫回pagination 再執行查詢
    執行查詢的doQuery會去讀取pagination內的資料來執行

data() {
  return {
    pagination: {
      items: [], // table要顯示的資料
      page: 1, // 目前第幾頁
      rowsPerPage: 50, // 每頁幾筆
      rowsNumber: 20 // 總筆數
    }
  }
}
methods: {
  async onRequest (props) {
    const { page, rowsPerPage } = props.pagination
    this.pagination.page = page
    this.pagination.rowsPerPage = rowsPerPage
    await this.doQuery()
  },
  async doQuery () {
    // 將pagination內的分頁資料 設定到api所需要吃的參數
    const queryParams = {
      countPerPage: this.pagination.rowsPerPage
      currentPage: this.pagination.page
    }
    // 假設呼叫api 吃queryParams參數執行server query
    const response = await doAPIfetch(queryParams)
    // 假設api回傳 data(查詢結果) 與meta(包含分頁資料)
    this.items = response.data
    this.meta = response.meta
    // 將分頁資訊取得的資料總量寫回pagination.rowsNumber
    this.pagination.rowsNumber = this.meta.total
  }
}