vue.js - 如何使用服务器端分页实现 Quasar q-table?
问题描述
我正在尝试使用 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
解决方案
Quasar 文档中有一个脚本服务器端分页、过滤和排序。onRequest
它显示了服务器端分页 ( , fetchFromServer
, getRowsNumberCount
)所需功能的存根。
在方法部分,您应该定义onRequest
,如果您将其作为事件的回调提供,将从框架中调用它@request
(见下文)。它应该更新rowsNumber
,从服务器获取数据,然后更新本地分页对象。
这很像你的this.$store.dispatch('matches/getMatches')
电话,所以试着从onRequest
.
在该<template>
部分中,添加
@request="onRequest"
为了收听@request
事件。
推荐阅读
- php - 使用 PHP 类更改 HTML 的颜色和字体大小
- python - 如何在函数的积分下绘制面积?参数多边形给出参数错误
- docker - Google Cloud Run 在 Healthcheck 正常之前启动容器
- ruby-on-rails - Rails Action Cable 不传输广播
- javascript - CSS 和纯 JS 自定义光标在悬停时展开
- java - Java 存储过程 DB2 问题
- docker - 无法使用fabric8 maven插件构建我自己的docker镜像
- azure - Azure 容器实例的“docker create”等价物是什么?
- javascript - Sqlite Node 模块输出错误的列
- symfony - 如何使用 Twig 格式化当前日期和时间?