Базовая структура таблицы

Для работы с таблицами в Element Plus используется компонент <el-table>, который обеспечивает мощный функционал отображения, сортировки и фильтрации данных. Таблица строится на основе массива объектов, где каждая запись соответствует одной строке, а свойства объектов — столбцам.

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Дата" width="180"></el-table-column>
    <el-table-column prop="name" label="Имя" width="180"></el-table-column>
    <el-table-column prop="address" label="Адрес"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2026-03-18', name: 'Иван Иванов', address: 'Москва, ул. Ленина, 10' },
        { date: '2026-03-17', name: 'Мария Петрова', address: 'Санкт-Петербург, Невский пр., 15' },
        { date: '2026-03-16', name: 'Сергей Кузнецов', address: 'Новосибирск, ул. Красный пр., 5' },
      ],
    };
  },
};
</script>

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

  • :data — связывает таблицу с массивом данных.
  • <el-table-column> определяет отдельный столбец.
  • prop — имя свойства объекта, которое будет отображено в колонке.
  • label — заголовок столбца.
  • width — фиксированная ширина колонки (необязательный параметр).

Сортировка и фильтрация столбцов

Element Plus позволяет добавлять сортировку и фильтры для каждого столбца.

Сортировка

<el-table-column prop="name" label="Имя" sortable></el-table-column>
  • Атрибут sortable автоматически добавляет стрелки для сортировки.
  • Можно использовать кастомную функцию сортировки:
<el-table-column
  prop="date"
  label="Дата"
  :sortable="(a, b) => new Date(a.date) - new Date(b.date)">
</el-table-column>

Фильтрация

<el-table-column
  prop="address"
  label="Город"
  :filters="[
    { text: 'Москва', value: 'Москва' },
    { text: 'Санкт-Петербург', value: 'Санкт-Петербург' }
  ]"
  :filter-method="filterCity"
>
</el-table-column>
methods: {
  filterCity(value, row) {
    return row.address.includes(value);
  }
}
  • filters задаёт доступные варианты фильтрации.
  • filter-method определяет логику фильтрации.

Пользовательские шаблоны колонок

Для отображения данных нестандартным образом применяется слот default:

<el-table-column prop="name" label="Имя">
  <template #default="{ row }">
    <strong>{{ row.name }}</strong>
  </template>
</el-table-column>
  • Через #default можно использовать весь объект строки (row) для сложных рендеров.
  • Можно комбинировать с компонентами Element Plus, например кнопками или аватарами.

Выделение строк и множественный выбор

<el-table
  :data="tableData"
  style="width: 100%"
  @selection-change="handleSelection">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column prop="name" label="Имя"></el-table-column>
  <el-table-column prop="address" label="Адрес"></el-table-column>
</el-table>
  • type="selection" добавляет чекбоксы для выбора строк.
  • Событие @selection-change возвращает массив выбранных объектов.
  • Можно реализовать функции массового удаления, редактирования или экспорта данных.

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

  • border — отображение границ таблицы:
<el-table :data="tableData" border></el-table>
  • stripe — чередующиеся полосы строк:
<el-table :data="tableData" stripe></el-table>
  • highlight-current-row — подсветка выбранной строки:
<el-table :data="tableData" highlight-current-row></el-table>
  • row-class-name — функция для динамического класса строк:
<el-table :data="tableData" :row-class-name="rowClassName">
methods: {
  rowClassName({ row, rowIndex }) {
    return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
  }
}

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

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

Использование пагинации с таблицами

Для работы с большим массивом данных удобно сочетать <el-table> с <el-pagination>:

<template>
  <el-table :data="pagedData">
    <el-table-column prop="name" label="Имя"></el-table-column>
    <el-table-column prop="address" label="Адрес"></el-table-column>
  </el-table>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="tableData.length"
    @current-change="handlePageChange">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...Array(100).keys()].map(i => ({
        name: `Пользователь ${i}`,
        address: `Город ${i}`
      })),
      currentPage: 1,
      pageSize: 10
    };
  },
  computed: {
    pagedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.tableData.slice(start, start + this.pageSize);
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    }
  }
};
</script>
  • :current-page и @current-change управляют активной страницей.
  • Вычисляемое свойство pagedData формирует подмассив для текущей страницы.

Итоговое понимание структуры

Основная структура таблицы в Element Plus строится на трёх ключевых элементах:

  1. Данные (data) — массив объектов.
  2. Колонки (el-table-column) — определяют, какие поля отображать и как их визуализировать.
  3. Дополнительные функции — сортировка, фильтры, слоты, чекбоксы, фиксация столбцов и пагинация.

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

Оглавление