Table

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

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

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

import { ElTable, ElTableColumn } from 'element-plus';

Простейшая структура таблицы выглядит следующим образом:

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="Дата" width="180"/>
  <el-table-column prop="name" label="Имя" width="180"/>
  <el-table-column prop="address" label="Адрес"/>
</el-table>
  • :data — массив объектов, которые будут отображаться в строках таблицы.
  • prop — ключ объекта, который отображается в колонке.
  • label — заголовок колонки.
  • width — фиксированная ширина колонки.

Настройка колонок

Колонки могут содержать слоты, позволяющие полностью кастомизировать отображение данных:

<el-table-column label="Имя пользователя">
  <template #default="scope">
    <strong>{{ scope.row.name }}</strong>
  </template>
</el-table-column>

scope.row — объект строки, scope.$index — индекс текущей строки.

Колонки можно сделать сортируемыми:

<el-table-column prop="age" label="Возраст" sortable/>

Для кастомной функции сортировки:

<el-table-column
  prop="age"
  label="Возраст"
  :sort-method="sortByAge"
/>

methods: {
  sortByAge(a, b) {
    return a.age - b.age;
  }
}

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

Element Plus поддерживает фильтры колонок, которые задаются через filters и filter-method:

<el-table-column
  prop="status"
  label="Статус"
  :filters="[{ text: 'Активен', value: 'active' }, { text: 'Неактивен', value: 'inactive' }]"
  :filter-method="filterStatus"
  filter-placement="bottom-end"
/>

methods: {
  filterStatus(value, row) {
    return row.status === value;
  }
}
  • filters — массив объектов { text, value }.
  • filter-method — функция, определяющая логику фильтрации.
  • filter-placement — позиция всплывающего фильтра.

Выделение строк и события

Таблица позволяет выделять строки с помощью highlight-current-row и управлять выбором через row-key:

<el-table
  :data="tableData"
  highlight-current-row
  @current-change="handleCurrentChange"
>
</el-table>
methods: {
  handleCurrentChange(currentRow, oldCurrentRow) {
    console.log('Текущая выбранная строка:', currentRow);
  }
}

Для множественного выбора используется type="selection":

<el-table-column type="selection" width="55"/>

Сложные структуры: объединение ячеек

Для объединения ячеек по строкам или колонкам применяется span-method:

<el-table
  :data="tableData"
  :span-method="mergeCells"
>
methods: {
  mergeCells({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0 && rowIndex % 2 === 0) {
      return [2, 1]; // объединить две строки
    }
    return [1, 1];
  }
}

Пагинация таблицы

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

<el-pagination
  :current-page="currentPage"
  :page-size="pageSize"
  :total="tableData.length"
  @current-change="handlePageChange"
/>
methods: {
  handlePageChange(page) {
    this.currentPage = page;
  }
}

Таблицу можно сочетать с пагинацией через вычисляемые свойства:

computed: {
  pagedData() {
    const start = (this.currentPage - 1) * this.pageSize;
    return this.tableData.slice(start, start + this.pageSize);
  }
}
<el-table :data="pagedData" style="width: 100%"></el-table>

Настройка стилей и классов

Компонент поддерживает кастомные классы и стили для строк и ячеек:

<el-table
  :data="tableData"
  row-class-name="custom-row"
  :cell-class-name="cellClassName"
/>
methods: {
  cellClassName({ row, column, rowIndex, columnIndex }) {
    return column.property === 'status' && row.status === 'inactive'
      ? 'text-red'
      : '';
  }
}

Фиксированные колонки и горизонтальная прокрутка

Для больших таблиц возможна фиксация колонок:

<el-table :data="tableData" style="width: 100%">
  <el-table-column fixed prop="name" label="Имя" width="150"/>
  <el-table-column prop="address" label="Адрес"/>
  <el-table-column prop="email" label="Email"/>
</el-table>

Для горизонтальной прокрутки задается max-height или style="width" на таблицу с шириной колонок больше ширины контейнера.

Динамическая таблица и реактивность

Данные в таблице полностью реактивны. Добавление, удаление или изменение объектов массива tableData автоматически обновляет отображение:

this.tableData.push({ date: '2026-03-18', name: 'Новый пользователь', address: 'ул. Пушкина, 10' });

Встроенные слоты для сложного контента

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

<el-table-column label="Действия">
  <template #default="scope">
    <el-button size="mini" type="primary" @click="editRow(scope.row)">Редактировать</el-button>
    <el-button size="mini" type="danger" @click="deleteRow(scope.row)">Удалить</el-button>
  </template>
</el-table-column>

Поддержка виртуализации

Для таблиц с десятками тысяч строк рекомендуется использовать виртуализацию через сторонние плагины (например, vue-virtual-scroller) с Element Plus, чтобы оптимизировать производительность.

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

Оглавление