时间戳

首页 > 解决方案 > Quasar中的客户端排序与服务器端分页

vue.js - Quasar中的客户端排序与服务器端分页

问题描述

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

<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);
},

标签： vue.jspaginationquasar-frameworkcolumnsortingquasar

解决方案

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

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

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

推荐阅读