如何使用服务器端分页实现 Quasar q-table？

Posted 2023-02-22

技术标签:

【中文标题】如何使用服务器端分页实现 Quasar q-table？【英文标题】：How to implement Quasar q-table with server-side pagination? 【发布时间】：2021-08-18 02:17:56 【问题描述】：

我正在尝试为 Quasar QTable 实现服务器端分页，使用 Vuex 和 Django Rest Framework 作为后端。我正在努力解释我的用例的文档。目前，我可以获得正确的页数和结果的第一页，但每页行的值和分页本身不起作用。 Quasar 文档说有一个 @request 事件，但我不确定如何将其合并到我的代码中。

为了完成这项工作，我还缺少什么？

**Vue**

<template>
<q-table
  title="Matches"
  :rows="matches.results"
  :columns="columns"
  v-model:pagination="pagination"
  row-key="id"
>
  <template v-slot:body-cell-actions="props">
    <q-td :props="props">
      <router-link class="action-links" :to=" name: 'Match', params:  id: props.row.id  ">Details</router-link>
    </q-td>
  </template>
</q-table>
</template>

<script>
import  mapState  from 'vuex'

export default     
  data() 
    return 
      columns: [
         name: 'team', label: 'Team', align: 'left', field: 'team', sortable: true, required: true ,
         name: 'date', label: 'Date', align: 'left', field: 'formatted_date', sortable: true ,
         name: 'actions', label: 'Actions', align: 'left', field: '' 
      ]
    
  ,
  mounted() 
    this.$store.dispatch('matches/getMatches')
  ,
  computed: 
    ...mapState(
      matches: state => state.matches.matches,
      pagination: state => state.matches.pagination
    )
  ,
  methods: 

</script>

**Vuex**

import  api  from 'boot/axios'

export const state = 
  matches: [],
  pagination: 
    sortBy: 'desc',
    descending: false,
    page: 1,
    rowsPerPage: 1,
    rowsNumber: 0
  


export const mutations = 
  SET_MATCHES(state, matches) 
    state.matches = matches
    state.pagination.rowsNumber = matches.count
  

export const actions = 
  getMatches( commit ) 
    api
      .get(`/api/v1/matches/?page=$state.pagination.page`)
      // returns object like this:
      // 
      //    count: 6,
      //    next: "http://localhost:8000/api/v1/matches/?page=3",
      //    previous: null,
      //    results: [...]
      // 
      .then(response => 
        commit('SET_MATCHES', response.data)
      )

**Backend**

class MatchPagination(PageNumberPagination):
    page_size = 2

class MatchViewSet(viewsets.ModelViewSet):
    serializer_class = MatchSerializer
    queryset = Match.objects.all()
    pagination_class = MatchPagination

【问题讨论】：

【参考方案1】：

Quasar 文档中有一个脚本Server side pagination, filter and sorting。它显示了服务器端分页所需功能的存根（onRequest、fetchFromServer、getRowsNumberCount）。

在方法部分，您应该定义onRequest，如果您将它作为@request 事件的回调提供，它将从框架中调用（见下文）。它应该更新rowsNumber，从服务器获取数据，然后更新本地分页对象。

这很像您的this.$store.dispatch('matches/getMatches') 呼叫，因此请尝试从onRequest 呼叫。

在<template> 部分，添加