Vuetify v-data-table с объектом gRPC

На чтение 3 мин Опубликовано 03.10.2024

Вопрос или проблема

Я пытаюсь создать v-data-table в Vuetify (Vue 3) с использованием нестандартных объектов, которые я получаю от gRPC. Вместо простых JSON-объектов, эти объекты требуют доступа к данным через методы, такие как getId() и getTitulo().

Вот структура моей таблицы:

            <v-data-table
              :headers="headers"
              :items="turmas.todasSimplificado"
              item-value="id"
            >
              <!-- Пользовательский слот для столбца "id" -->
              <template #[`item.id`]="{ item }">
                {{ item.getId() }}
              </template>
              <!-- Пользовательский слот для столбца "titulo" -->
              <template #[`item.titulo`]="{ item }">
                {{ item.getTitulo() }}
              </template>
            </v-data-table>

Этот подход успешно отображает данные, но у меня есть две проблемы:

Сортировка не работает: Нажатие на столбец для сортировки не вызывает правильной сортировки.
Пагинация сбрасывается на первую страницу: Каждый раз, когда я кликаю для сортировки по любому столбцу, пагинация возвращается на первую страницу.

Что я делаю не так?
Какой лучший способ использования нестандартных объектов с v-data-table от Vuetify?

Ответ или решение

Для использования компонента v-data-table из Vuetify с объектами gRPC, которые требуют доступа к данным через методы (например, getId() и getTitulo()), вам нужно будет немного модифицировать ваш код и подход к сортировке и пагинации. Основной проблемой является то, что v-data-table ожидает "плоские" объекты и не сможет автоматически правильно сортировать или обрабатывать пагинацию для объектов, методы которых используются для доступа к данным.

Вот как вы можете решить вашу проблему:

Подготовка данных: Вы можете создать вычисляемое свойство, которое будет преобразовывать ваши gRPC объекты в обычные объекты JavaScript, что обеспечит поддержку сортировки и пагинации.
Настройка заголовков: Убедитесь, что заголовки вашей таблицы настроены правильно, и указаны ключи для сортировки.
Изменение шаблонов: Убедитесь, что вы используете правильные слоты для отображения данных.

Вот пример кода, который поможет вам решить работу с v-data-table:

<template>
  <v-data-table
    :headers="headers"
    :items="transformedItems"
    item-value="id"
    :pagination.sync="pagination"
  >
    <template #[`item.id`]="{ item }">
      {{ item.getId() }}
    </template>
    <template #[`item.titulo`]="{ item }">
      {{ item.getTitulo() }}
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      turmas: {
        todasSimplificado: [], // Ваши gRPC объекты
      },
      pagination: {
        page: 1,
        rowsPerPage: 5,
      },
      headers: [
        { text: 'ID', value: 'id' },
        { text: 'Título', value: 'titulo' },
      ]
    };
  },
  computed: {
    transformedItems() {
      return this.turmas.todasSimplificado.map(item => ({
        id: item.getId(),
        titulo: item.getTitulo(),
        // Добавьте дополнительные поля по мере необходимости
      }));
    }
  }
};
</script>

Объяснение изменений:

Преобразование данных: Мы добавили вычисляемое свойство transformedItems, которое берет ваши объекты gRPC и преобразует их в обычные JavaScript объекты. В этом новом формате v-data-table сможет эффективно обрабатывать сортировку и пагинацию.
Пагинация: Мы добавили поддержку для пагинации через :pagination.sync="pagination".
Заголовки таблицы: В headers мы указали параметры для сортировки, чтобы v-data-table мог правильно связывать их с вашими данными.

С этими изменениями ваши данные должны корректно сортироваться, а пагинация должна оставаться стабильной при любых действиях в таблице.