Сортировка данных

В библиотеке Element Plus сортировка данных реализована преимущественно через компонент el-table. Он предоставляет встроенные механизмы сортировки для колонок таблицы, позволяя управлять отображением данных по возрастанию или убыванию, а также настраивать кастомные функции сортировки для сложных случаев.

Подключение и базовая структура el-table

Для использования сортировки необходимо определить таблицу с колонками:

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Имя" sortable></el-table-column>
    <el-table-column prop="age" label="Возраст" sortable></el-table-column>
    <el-table-column prop="salary" label="Зарплата" sortable></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Алексей', age: 28, salary: 50000 },
        { name: 'Мария', age: 32, salary: 75000 },
        { name: 'Иван', age: 24, salary: 45000 },
      ],
    };
  },
};
</script>

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

  • Атрибут sortable на колонке активирует базовую сортировку по значению поля prop.
  • Пользователь может кликнуть по заголовку колонки для сортировки данных.
  • Сортировка по умолчанию работает для числовых и строковых значений.

Пользовательские функции сортировки

Для более сложных случаев можно задать кастомную функцию сортировки с помощью атрибута sort-method:

<el-table-column
  prop="name"
  label="Имя"
  :sortable="true"
  :sort-method="customSort"
></el-table-column>

<script>
export default {
  methods: {
    customSort(a, b) {
      // Сортировка по длине имени
      return a.name.length - b.name.length;
    },
  },
};
</script>

Особенности кастомной сортировки:

  • Функция принимает два аргумента: элементы, которые сравниваются.
  • Возвращаемое значение <0 сортирует a перед b, >0 – b перед a, 0 – без изменения порядка.
  • Позволяет реализовать сортировку по вложенным объектам, датам, сложным вычисляемым критериям.

Управление состоянием сортировки

Element Plus предоставляет возможность программно управлять сортировкой через атрибуты default-sort и события sort-change.

Пример использования default-sort:

<el-table :data="tableData" :default-sort="{prop: 'age', order: 'descending'}">
  <el-table-column prop="name" label="Имя" sortable></el-table-column>
  <el-table-column prop="age" label="Возраст" sortable></el-table-column>
</el-table>
  • prop – поле, по которому изначально выполняется сортировка.
  • order – направление: 'ascending' или 'descending'.

Отслеживание изменений сортировки через событие sort-change:

<el-table :data="tableData" @sort-change="handleSortChange">
  <el-table-column prop="salary" label="Зарплата" sortable></el-table-column>
</el-table>

<script>
export default {
  methods: {
    handleSortChange({ column, prop, order }) {
      console.log(`Сортировка по ${prop} в порядке ${order}`);
    },
  },
};
</script>
  • column – объект колонки, где произошла сортировка.
  • prop – имя свойства, по которому выполнена сортировка.
  • order – текущее направление сортировки.

Многоуровневая и серверная сортировка

Многоуровневая сортировка

Для сложных таблиц возможно реализовать сортировку по нескольким колонкам одновременно, используя кастомные функции сортировки или обработку данных до передачи в таблицу. Прямой встроенной поддержки многоуровневой сортировки в el-table нет, поэтому обычно:

  1. Создается массив ключей сортировки.
  2. Данные сортируются в computed свойстве с использованием функции Array.prototype.sort.
  3. Передаются в el-table через :data.

Серверная сортировка

При больших объемах данных сортировка может выполняться на сервере. В этом случае:

  • el-table используется только как визуальный компонент.
  • Событие sort-change вызывает метод запроса данных с новыми параметрами сортировки.
  • Сервер возвращает отсортированный массив, который обновляет :data.
methods: {
  fetchData({ prop, order }) {
    axios.get('/api/users', { params: { sortBy: prop, sortOrder: order } })
      .then(response => { this.tableData = response.data; });
  },
  handleSortChange({ prop, order }) {
    this.fetchData({ prop, order });
  },
}

Сортировка по сложным типам данных

Для полей с датами, объектами или массивами стандартная сортировка может быть недостаточной. В таких случаях:

  • Использовать sort-method, который преобразует данные в сравнимый формат.
  • Преобразовать строки дат в объекты Date.
  • Для массивов использовать определенный критерий (например, длину или минимальное значение).
<el-table-column
  prop="birthday"
  label="Дата рождения"
  sortable
  :sort-method="(a, b) => new Date(a.birthday) - new Date(b.birthday)"
></el-table-column>

Советы по оптимизации сортировки

  • Для больших таблиц избегать полной сортировки на клиенте, отдавая предпочтение серверной сортировке.
  • Использовать вычисляемые свойства (computed) для фильтрации и сортировки данных без повторной загрузки таблицы.
  • При сложных кастомных функциях сортировки стараться минимизировать количество операций внутри sort-method, чтобы не снижать производительность при больших объемах данных.

Визуальная индикация сортировки

  • Элемент стрелки в заголовке колонки автоматически меняет направление при сортировке.
  • Можно кастомизировать внешний вид через слоты заголовка и CSS-классы ascending / descending.
  • Для серверной сортировки важно обновлять default-sort или активное состояние стрелок, чтобы пользователь видел текущее направление сортировки.

Эти возможности делают Element Plus гибким инструментом для реализации любой сортировки: от простых таблиц до больших интерактивных приложений с динамической сортировкой данных.

Оглавление