客户端 在类星体中使用服务器端分页进行排序

Question

我有一个表，显示带有服务器端分页的搜索结果，但是当我单击列时，没有进行排序，服务器再次显示任何列箭头单击的结果。有什么方法可以将分页限制为仅对页脚中的页面箭头进行，然后在单击列时对显示的结果进行排序？

<q-table
dense
:title="Patient result"
:data="searchResultList"
:columns="columns"
:pagination="serverPagination"
row-key="name"
:no-data-label="noDataMessage"
:loading="loading"
@request="request"
>
data() {
return {
filter: '',
columns: [
{
name: 'patientId',
required: true,
label: 'patientId',
align: 'left',
field: row => row.patientId,
format: val => `${val}`,
sortable: true,
}
{
name: 'lastname', align: 'center', label: 'lastname', field: 'lastname', sortable: true,
},
{
name: 'firstname', align: 'center', label: 'firstname', field: 'firstname', sortable: true,
},
{
name: 'dob', align: 'center', label: 'dob', field: 'dob', sortable: true,
},
],
page: 1,
rowsInPage: 25,
};
computed: {
serverPagination() {
return {
sortBy: this.paginationObject.sortBy,
descending: this.paginationObject.descending,
page: this.paginationObject.page,
rowsNumber: this.patientSearchResults.count,
rowsPerPage: this.paginationObject.rowsPerPage,
};
paginationObject: {
sortBy: 'name',
descending: false,
page: 1,
rowsPerPage: 25,
methods: {
request(props) {
this.$store.dispatch('patientSearch/setPaginationObject', props);
},

Answer 1

使用sort-method.您可以编写一个自定义函数，您可以在其中传递rows(不是全部，而是根据分页，即如果所选页面为 1，则数组中的行将为 0-5。在这里，我猜默认可见行将是 5。

查看此 API 参考 - https://quasar.dev/vue-components/table

在QTable API中，您将找到有关此方法的详细信息。