Фиксированные столбцы

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

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="Дата" width="120" fixed></el-table-column>
  <el-table-column prop="name" label="Имя" width="150"></el-table-column>
  <el-table-column prop="address" label="Адрес" width="300"></el-table-column>
  <el-table-column prop="action" label="Действия" width="150" fixed="right"></el-table-column>
</el-table>
  • fixed без значения закрепляет столбец слева по умолчанию.
  • fixed="right" закрепляет столбец справа.

Настройка ширины для фиксированных столбцов

Фиксированные столбцы требуют явного указания ширины (width), иначе поведение будет непредсказуемым. Рекомендуется задавать ширину как в пикселях, так и с учётом содержимого ячеек, чтобы избежать сжатия текста.

<el-table-column prop="email" label="Email" width="250" fixed></el-table-column>

Горизонтальная прокрутка с фиксированными столбцами

При наличии фиксированных столбцов важно учитывать горизонтальную прокрутку таблицы. Свойство scroll-x управляется автоматически, если таблица имеет ширину больше, чем контейнер.

<el-table :data="tableData" style="width: 800px">
  <el-table-column prop="id" label="ID" width="80" fixed></el-table-column>
  <el-table-column prop="name" label="Имя" width="150"></el-table-column>
  <el-table-column prop="email" label="Email" width="200"></el-table-column>
  <el-table-column prop="address" label="Адрес" width="250"></el-table-column>
  <el-table-column prop="action" label="Действия" width="120" fixed="right"></el-table-column>
</el-table>

При этом таблица автоматически создаёт отдельные элементы для фиксированной части слева, центра, и фиксированной части справа, обеспечивая плавное скроллирование без смещения данных.

Поддержка нескольких фиксированных столбцов

Можно закреплять несколько столбцов слева или справа. Они будут размещены в порядке объявления <el-table-column>.

<el-table :data="tableData">
  <el-table-column prop="id" label="ID" width="80" fixed></el-table-column>
  <el-table-column prop="name" label="Имя" width="150" fixed></el-table-column>
  <el-table-column prop="email" label="Email" width="200"></el-table-column>
  <el-table-column prop="phone" label="Телефон" width="150" fixed="right"></el-table-column>
  <el-table-column prop="action" label="Действия" width="120" fixed="right"></el-table-column>
</el-table>

В этом примере два столбца слева и два столбца справа будут закреплены независимо от горизонтальной прокрутки.

Ограничения и рекомендации

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

Стилизация фиксированных столбцов

Element Plus автоматически применяет классы .el-table__fixed для закреплённых колонок. Их можно переопределять через CSS для изменения фона, границ или тени:

.el-table__fixed {
  background-color: #f9f9f9;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

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

Интерактивность и слежение за положением

Фиксированные столбцы остаются интерактивными: поддерживаются клики, сортировка и фильтрация. Также можно программно определить ширину или положение фиксированных столбцов через методы и события <el-table>, такие как header-dragend для динамического изменения ширины.

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

Оглавление