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

Question

我正在尝试使用 Vuex 和 Django Rest Framework 作为后端，为 Quasar QTable 实现服务器端分页。我正在努力解释我的用例的文档。目前，我可以获得正确的页数和结果的第一页，但每页行数和分页本身不起作用。 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

Answer 1

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

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

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

在 <template> 部分，添加

  @request="onRequest"

为了监听@request事件。

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

How to implement Quasar q-table with server-side pagination?

vue.js

django-rest-framework

vuex

quasar-framework