Сортировка и фильтрация

В Quasar Framework сортировка и фильтрация данных играют ключевую роль при работе с компонентами отображения информации, такими как <q-table>, <q-list> и <q-select>. Библиотека предоставляет встроенные механизмы для управления этими процессами, что позволяет создавать гибкие и отзывчивые интерфейсы без необходимости писать сложный код с нуля.

Сортировка данных в <q-table>

Компонент <q-table> поддерживает многоуровневую и локальную сортировку. Основные параметры, отвечающие за сортировку:

  • sort-method — функция, позволяющая задавать кастомную логику сортировки.
  • sort-order — направление сортировки ('asc' или 'desc').
  • sortable — булевое значение или массив полей, которые можно сортировать.

Пример базовой сортировки по колонке name:

<q-table
  :rows="users"
  :columns="columns"
  row-key="id"
  :sort-method="customSort"
/>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Анна', age: 25 },
        { id: 2, name: 'Борис', age: 30 },
        { id: 3, name: 'Виктор', age: 22 }
      ],
      columns: [
        { name: 'name', label: 'Имя', field: 'name', sortable: true },
        { name: 'age', label: 'Возраст', field: 'age', sortable: true }
      ]
    };
  },
  methods: {
    customSort(rows, col, order) {
      return rows.sort((a, b) => {
        const valA = a[col.field];
        const valB = b[col.field];
        if (order === 'asc') return valA > valB ? 1 : -1;
        return valA < valB ? 1 : -1;
      });
    }
  }
};
</script>

Ключевые моменты:

  • Сортировка может быть реализована как на клиенте, так и на сервере. Для серверной сортировки достаточно передавать параметры сортировки через API-запрос.
  • Для нескольких колонок Quasar позволяет использовать массив объектов в sort-method, чтобы реализовать многоуровневую сортировку.

Фильтрация данных

Фильтрация в Quasar реализуется через проп filter для <q-table> и <q-select> или через динамическое применение массивов данных с использованием стандартных методов JavaScript (filter, includes, match).

Пример фильтрации по имени:

<q-input v-model="search" placeholder="Поиск по имени" outlined />

<q-table
  :rows="filteredUsers"
  :columns="columns"
  row-key="id"
/>

<script>
export default {
  data() {
    return {
      search: '',
      users: [
        { id: 1, name: 'Анна', age: 25 },
        { id: 2, name: 'Борис', age: 30 },
        { id: 3, name: 'Виктор', age: 22 }
      ],
      columns: [
        { name: 'name', label: 'Имя', field: 'name' },
        { name: 'age', label: 'Возраст', field: 'age' }
      ]
    };
  },
  computed: {
    filteredUsers() {
      if (!this.search) return this.users;
      return this.users.filter(user =>
        user.name.toLowerCase().includes(this.search.toLowerCase())
      );
    }
  }
};
</script>

Особенности фильтрации:

  • Можно создавать кастомные фильтры с использованием регулярных выражений или сложной логики, комбинируя несколько условий.
  • Для больших массивов данных рекомендуется использовать серверную фильтрацию, чтобы избежать падения производительности.
  • Фильтры можно применять как к конкретным колонкам, так и глобально по всей таблице.

Комбинирование сортировки и фильтрации

Quasar позволяет объединять сортировку и фильтрацию для создания комплексного интерфейса управления данными:

computed: {
  processedUsers() {
    let data = this.users;

    // Фильтрация
    if (this.search) {
      data = data.filter(user =>
        user.name.toLowerCase().includes(this.search.toLowerCase())
      );
    }

    // Сортировка
    const { field, order } = this.sort;
    if (field && order) {
      data = data.sort((a, b) => {
        const valA = a[field];
        const valB = b[field];
        if (order === 'asc') return valA > valB ? 1 : -1;
        return valA < valB ? 1 : -1;
      });
    }

    return data;
  }
}

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

Расширенные возможности

  • Кастомные фильтры колонок с использованием слотов body-cell и header-cell.
  • Встроенные фильтры даты и чисел через компоненты Quasar (<q-date>, <q-range>).
  • Интеграция с Vuex или Pinia для глобального управления состоянием таблицы, фильтров и сортировки.
  • Поддержка асинхронных данных: Quasar позволяет обновлять таблицу после завершения API-запроса, сохраняя выбранные фильтры и сортировку.

Практические рекомендации

  • Использовать computed свойства для фильтрации и сортировки, чтобы данные автоматически обновлялись при изменении состояния.
  • Минимизировать обработку данных на клиенте для больших массивов — отдавать сортировку и фильтрацию серверу.
  • Применять debounce для полей поиска, чтобы избежать лишних вычислений при каждом вводе.
  • Для UX критично добавлять визуальные индикаторы сортировки (asc/desc) и фильтрации для каждой колонки.

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

Оглавление