Фильтрация столбцов

Фильтрация столбцов в Element Plus реализуется через компонент el-table с использованием свойства filters и обработчиков фильтрации. Этот механизм позволяет создавать удобные интерактивные таблицы, где данные могут быть отфильтрованы по заданным критериям без дополнительной логики на стороне сервера.

Настройка фильтров для столбцов

Каждый столбец таблицы в Element Plus задается через компонент el-table-column, где фильтры указываются с помощью свойства filters. Формат массива фильтров следующий:

filters: [
  { text: 'Активные', value: 'active' },
  { text: 'Неактивные', value: 'inactive' }
]

Здесь text — отображаемое название фильтра, value — значение, которое будет использоваться в функции фильтрации.

Для включения фильтрации необходимо добавить атрибут filter-method, который принимает функцию с параметрами (value, row, column):

<el-table :data="tableData">
  <el-table-column prop="status" label="Статус"
                   :filters="statusFilters"
                   :filter-method="filterStatus"
                   filter-placement="bottom-end">
  </el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Иван', status: 'active' },
        { name: 'Мария', status: 'inactive' },
      ],
      statusFilters: [
        { text: 'Активные', value: 'active' },
        { text: 'Неактивные', value: 'inactive' }
      ]
    }
  },
  methods: {
    filterStatus(value, row) {
      return row.status === value;
    }
  }
}
</script>

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

  • prop определяет поле объекта данных, по которому выполняется фильтрация.
  • filter-method отвечает за логику фильтрации, возвращает true, если строка должна отображаться.
  • filter-placement задает расположение панели фильтров.

Множественная фильтрация

Для поддержки выбора нескольких значений одновременно используется атрибут filter-multiple:

<el-table-column prop="status" label="Статус"
                 :filters="statusFilters"
                 :filter-method="filterStatus"
                 :filter-multiple="true">
</el-table-column>

Функция фильтрации при множественном выборе принимает массив выбранных значений:

filterStatus(values, row) {
  return values.includes(row.status);
}

Программное управление фильтрацией

Фильтрацию можно задавать и программно через ref таблицы:

<el-table ref="userTable" :data="tableData">
  <el-table-column prop="status" label="Статус" :filters="statusFilters" :filter-method="filterStatus"/>
</el-table>

this.$refs.userTable.clearFilter(); // Очистка фильтров
this.$refs.userTable.filter('status', 'active'); // Применение фильтра по ключу

Использование методов clearFilter и filter позволяет динамически изменять фильтры без перезагрузки данных.

Кастомизация панели фильтров

Элемент фильтров поддерживает слот header для кастомного рендеринга:

<el-table-column prop="status" label="Статус">
  <template #header="scope">
    <el-input placeholder="Поиск статуса" v-model="statusSearch"
              @input="applyCustomFilter(scope.column)">
    </el-input>
  </template>
</el-table-column>

methods: {
  applyCustomFilter(column) {
    this.$refs.userTable.filter(column, this.statusSearch);
  }
}

Такой подход позволяет создавать фильтры с текстовым поиском или сложной логикой.

Производительность фильтрации больших таблиц

При больших объёмах данных рекомендуется:

  • Использовать локальную фильтрацию только для текущей страницы данных.
  • Для серверной фильтрации реализовать запросы с параметрами фильтрации через API.
  • Избегать сложной логики внутри filter-method, которая выполняется для каждой строки при каждом изменении фильтра.

Итоговые рекомендации по фильтрации столбцов

  1. Всегда определять prop для соответствия полю данных.
  2. Для множественного выбора использовать filter-multiple.
  3. Программно управлять фильтрацией через ref для динамических интерфейсов.
  4. Использовать слоты для сложных фильтров с поиском или кастомными компонентами.
  5. При работе с большим объёмом данных рассматривать серверную фильтрацию для оптимизации производительности.

Фильтрация столбцов в Element Plus — мощный инструмент, позволяющий создавать гибкие таблицы с интерактивной и настраиваемой логикой отображения данных.

Оглавление