Vuetify: сторона данных, разбитая на страницы, не сортирует стороны клиента - PullRequest
Новая
       12

Vuetify: сторона данных, разбитая на страницы, не сортирует стороны клиента

0 голосов
/ 10 января 2020

Проблема

Проблема уже описана в заголовке: Когда я использую данные с разбивкой по страницам на стороне сервера (этот компонент: https://vuetifyjs.com/en/components/data-tables) и хочу, чтобы она сортировала сторону клиента ( например, я использую publi c API, который я не разрабатываю) Сортировка по умолчанию не работает для компонента.

Возможно ли это вообще? В документах приведен только пример разбивки на страницы и сортировки на стороне сервера.

Мой компонент: 

<v-data-table
          :headers="datapointHeaders"
          :items="datapoints"
          :items-per-page="datapointsPerPage"
          :server-items-length="datapointsTotalItems"
          :loading="loading"
          :loading-text="'Loading datapoints ...'"
          :options.sync="options"
          :footer-props="footerProps"
        >
          <template v-slot:item.health="{ item }">
            <StatusLamp
              :color="item.health"
              :classes="'ml-2'"
            />
          </template>
          <template v-slot:item.attributes="{ item }">
            <v-btn
              outlined
              small
              color="blue"
              @click="showAttributes(item)"
              class="mb-1 mr-1 mt-1"
            >details</v-btn>
          </template>
        </v-data-table>

Часть JS: 

private options: any = {
  itemsPerPage: this.datapointsPerPage,
  page: this.datapointsCurrentPage,
};

@Watch('options.page')
onPageChange(value: number, oldValue: number): void {
  this.fetchDatapoints(value, this.options.itemsPerPage);
}

@Watch('options.itemsPerPage')
onPerPageChange(value: number, oldValue: number): void {
  this.fetchDatapoints(this.page, value);
}

get loading(): boolean {
  return get(this.$store.getters.getDatapoints, ['loading'], true);
}

get attributes(): any {
  const res: any = [];
  if (this.selectedDatapoint == null) return [];

  Object.keys(get(this.selectedDatapoint, ['attributes'], {})).forEach((key: string) => {
    if (Object.prototype.hasOwnProperty.call(get(this.selectedDatapoint, ['attributes'], {}), key)) {
      res.push({ name: key, value: this.selectedDatapoint.attributes[key] });
    }
  });

  return res;
}

get datapoints(): any {
  return this.$store.getters.getDatapoints.datapoints
    ? get(this.$store.getters.getDatapoints.datapoints, 'items', []).map((item: any) => ({
      ...item,
      last_value: Math.floor(get(item, ['data', '0', '1'], 0) * 100) / 100,
    }))
    : [];
}

get datapointsCurrentPage(): number {
  return get(this.$store.getters.getDatapoints, ['datapoints', 'meta', 'current_page'], 1);
}

get datapointsPerPage(): number {
  return get(this.$store.getters.getDatapoints, ['datapoints', 'meta', 'per_page'], 10);
}

get datapointsTotalPages(): number {
  return get(this.$store.getters.getDatapoints, ['datapoints', 'meta', 'total_pages'], 0);
}

get datapointsTotalItems(): number {
  return get(this.$store.getters.getDatapoints, ['datapoints', 'meta', 'total_items'], 0);
}

РЕДАКТИРОВАНИЕ

Я только что заметил: как только я удаляю свойство server-items-length из компонента v-data-table, сортировка работает на стороне клиента. Но тогда, очевидно, общая длина предметов теряется, и она показывает только текущий per_page как максимум для длины предметов.

1 Ответ

0 голосов
/ 13 января 2020

После небольшого дополнительного расследования

Относительно # vuetify-help channel на официальной дискордеции vuetify, о которой я просил именно эту проблему, разбиение на страницы и сортировка на стороне cilent отключаются, как только один использует длину-элемента-сервера. То же правило относится и к поиску.

Кроме того, после небольшого расследования я обнаружил связанную проблему с search + server side pagination: https://github.com/vuetifyjs/vuetify/issues/3475#issuecomment -370566804

Заключение

Я должен признать, что сортировка и фильтрация на стороне клиента не имеет никакого смысла для разбитых на страницы данных на стороне сервера, поскольку она будет только фильтровать и выполнять поиск по текущей странице.

...