서버측 페이지 지정을 사용하여 Quasar q-table을 구현하는 방법

서버측 페이지 지정을 사용하여 Quasar q-table을 구현하는 방법

나는 Vuex와 Django Rest Framework를 백엔드로 사용하여 Quasar QTable에 대한 서버측 페이지 지정을 구현하려고 한다.사용 사례에 대한 설명서를 해석하기 위해 애쓰고 있다.현재 정확한 페이지 수와 결과의 첫 페이지를 얻을 수 있지만 페이지당 행 수 값과 페이지 지정 자체는 작동하지 않는다.콰사르 문서에서는 @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

Quasar 문서화 서버측 페이지 지정, 필터 및 정렬에 스크립트가 있다.서버측 페이지 지정에 필요한 기능에 대한 스텁을 보여준다.onRequest,fetchFromServer,getRowsNumberCount).

메소드 섹션에서 정의하십시오.onRequest에 대한 콜백으로 제공하면 프레임워크에서 호출될 것이다.@request이벤트(아래 참조).업데이트되어야 한다.rowsNumber, 서버에서 데이터를 가져온 다음 로컬 페이지 지정 개체를 업데이트하십시오.

이건 네 것과 많이 닮았어.this.$store.dispatch('matches/getMatches')전화를 걸어봐, 그러니 전화해서onRequest.

에서<template>섹션, 추가

  @request="onRequest"

경청하기 위하여@request사건의

참조URL: https://stackoverflow.com/questions/67762484/how-to-implement-quasar-q-table-with-server-side-pagination