Группировка столбцов

В библиотеке Element Plus для работы с таблицами (el-table) предусмотрена возможность группировки столбцов с помощью компонента <el-table-column>. Это позволяет создавать сложные структуры таблиц, где один столбец может быть родительским и включать несколько дочерних, объединяя данные по логической или визуальной структуре.

Основы вложенных столбцов

Каждый столбец таблицы определяется через компонент <el-table-column>, который может содержать следующие ключевые свойства:

  • prop — имя свойства объекта данных, отображаемого в столбце.
  • label — заголовок столбца.
  • width — фиксированная ширина столбца.
  • align — выравнивание текста (left, center, right).

Для создания группировки столбцов необходимо вложить один <el-table-column> в другой. Родительский столбец не требует свойства prop, так как сам по себе он не отображает данные, а служит контейнером для дочерних столбцов.

Пример структуры:

<el-table :data="tableData" border>
  <el-table-column label="Имя и контакты">
    <el-table-column prop="name" label="Имя" width="120"></el-table-column>
    <el-table-column prop="email" label="Email" width="200"></el-table-column>
  </el-table-column>
  <el-table-column label="Адрес">
    <el-table-column prop="city" label="Город" width="120"></el-table-column>
    <el-table-column prop="country" label="Страна" width="120"></el-table-column>
  </el-table-column>
</el-table>

В этом примере “Имя и контакты” и “Адрес” выступают как родительские столбцы, объединяющие два дочерних. На рендере таблицы создается визуальная группировка, где дочерние столбцы выровнены под общим заголовком.

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

Element Plus позволяет создавать многуровневые группы столбцов, что особенно полезно при работе с финансовыми отчетами или аналитикой, где данные логически объединяются в несколько уровней.

<el-table :data="tableData" border>
  <el-table-column label="Личные данные">
    <el-table-column label="Контакты">
      <el-table-column prop="name" label="Имя"></el-table-column>
      <el-table-column prop="phone" label="Телефон"></el-table-column>
    </el-table-column>
    <el-table-column label="Адрес">
      <el-table-column prop="city" label="Город"></el-table-column>
      <el-table-column prop="country" label="Страна"></el-table-column>
    </el-table-column>
  </el-table-column>
</el-table>

Здесь создается трехуровневая иерархия:

  1. Родительский столбец “Личные данные”.
  2. Внутренние группы “Контакты” и “Адрес”.
  3. Дочерние столбцы с конкретными данными.

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

Стилизация и выравнивание

Для родительских и дочерних столбцов можно задавать индивидуальные стили. Ключевые свойства:

  • align — выравнивание текста.
  • header-align — выравнивание заголовка.
  • class-name и header-class-name — назначение пользовательских CSS-классов для ячеек и заголовков.

Пример с выравниванием:

<el-table :data="tableData" border>
  <el-table-column label="Личные данные" header-align="center">
    <el-table-column prop="name" label="Имя" align="left"></el-table-column>
    <el-table-column prop="email" label="Email" align="center"></el-table-column>
  </el-table-column>
</el-table>

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

Совмещение с функциональными возможностями

Группировка столбцов полностью совместима с другими функциональными возможностями el-table:

  • Сортировка (sortable) — может применяться как к родительским, так и к дочерним столбцам.
  • Фильтры (filters) — фильтры работают на уровне дочерних столбцов.
  • Фиксированные столбцы (fixed) — дочерние столбцы внутри группы можно закреплять слева или справа.

Пример комбинированного подхода:

<el-table :data="tableData" border>
  <el-table-column label="Контакты" fixed="left">
    <el-table-column prop="name" label="Имя" sortable></el-table-column>
    <el-table-column prop="email" label="Email"></el-table-column>
  </el-table-column>
  <el-table-column label="Адрес">
    <el-table-column prop="city" label="Город" sortable></el-table-column>
    <el-table-column prop="country" label="Страна"></el-table-column>
  </el-table-column>
</el-table>

Ограничения и особенности

  1. Проп prop не обязателен для родительских столбцов. Если его указать, данные не будут корректно отображаться.
  2. Ширина родительского столбца автоматически вычисляется как сумма ширин дочерних. Можно задавать минимальную ширину через min-width.
  3. Вложенность столбцов не ограничена библиотекой, но рекомендуется использовать не более 3–4 уровней для сохранения читаемости таблицы.
  4. Стилизация границ и цвета наследуется от дочерних элементов, поэтому для глобального изменения внешнего вида группы лучше использовать CSS-классы на родительский столбец.

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

Группировка столбцов особенно полезна для:

  • Финансовых отчетов с разделением показателей на категории.
  • Административных панелей с логически объединенными данными (например, контактные и адресные данные).
  • Таблиц с динамическими наборами столбцов, где можно сгруппировать данные для упрощенного визуального восприятия.

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

Оглавление