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

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

Использование v-slot для ячеек

Для того чтобы задать пользовательский шаблон ячейки, используется директива v-slot (или сокращение #) на <el-table-column>. Синтаксис следующий:

<el-table :data="tableData">
  <el-table-column prop="name" label="Имя">
    <template #default="scope">
      <span style="color: blue;">{{ scope.row.name }}</span>
    </template>
  </el-table-column>
</el-table>

Здесь scope содержит объект с ключами:

  • row — текущий объект данных строки
  • column — объект колонки, содержащий свойства колонки
  • rowIndex — индекс строки в данных

Использование scope.row позволяет напрямую работать с данными строки и формировать произвольное отображение.

Шаблоны для сложного форматирования

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

<el-table-column prop="status" label="Статус">
  <template #default="scope">
    <el-tag 
      :type="scope.row.status === 'active' ? 'success' : 'warning'"
    >
      {{ scope.row.status === 'active' ? 'Активен' : 'Неактивен' }}
    </el-tag>
  </template>
</el-table-column>

Здесь каждая ячейка визуализирует статус с помощью компонента <el-tag>, меняя цвет и текст в зависимости от значения поля.

Встраивание действий в ячейки

Шаблоны позволяют внедрять кнопки и элементы управления непосредственно в ячейки:

<el-table-column label="Действия" width="180">
  <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>

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

Использование слотов заголовка

Помимо ячеек данных, Element Plus позволяет настраивать шаблон заголовка колонки с помощью слота header:

<el-table-column prop="price" label="Цена">
  <template #header="scope">
    <span style="font-weight: bold;">{{ scope.column.label }} (₽)</span>
  </template>
</el-table-column>

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

Динамические шаблоны с компонентами

Для более масштабных проектов удобно создавать отдельные компоненты для ячеек:

<!-- PriceCell.vue -->
<template>
  <el-tag :type="price > 1000 ? 'danger' : 'success'">{{ formattedPrice }}</el-tag>
</template>

<script setup>
defineProps({
  price: Number
})

const formattedPrice = computed(() => new Intl.NumberFormat('ru-RU', {
  style: 'currency', currency: 'RUB'
}).format(price))
</script>

И использовать в таблице:

<el-table-column prop="price" label="Цена">
  <template #default="scope">
    <PriceCell :price="scope.row.price" />
  </template>
</el-table-column>

Такой подход повышает читаемость и переиспользуемость кода.

Работа с редактируемыми ячейками

Element Plus позволяет создавать инлайн-редактирование с использованием пользовательских шаблонов:

<el-table-column prop="quantity" label="Количество">
  <template #default="scope">
    <el-input-number
      v-model="scope.row.quantity"
      :min="0"
      @change="updateQuantity(scope.row)"
    />
  </template>
</el-table-column>

Теперь пользователь может менять значения прямо в таблице, а метод updateQuantity синхронизирует изменения с данными.

Советы по оптимизации

  • Использовать отдельные компоненты для сложных ячеек, чтобы таблица оставалась легкой и читаемой.
  • Для больших таблиц применить виртуализацию через el-table с height и max-height, чтобы уменьшить нагрузку на рендеринг.
  • Использовать условные рендеры вместо больших цепочек v-if внутри ячеек, если возможен выбор из фиксированных вариантов.

Итоговая структура

Эффективное использование пользовательских шаблонов ячеек в Element Plus включает:

  1. Простое форматирование — изменение цвета, стиля текста, добавление тегов.
  2. Интерактивные элементы — кнопки, переключатели, поля ввода.
  3. Слоты заголовков — кастомизация шапки таблицы.
  4. Вынос компонентов — для сложных визуальных элементов и переиспользования.
  5. Редактирование в ячейках — синхронизация с данными в реальном времени.

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

Оглавление