Развертываемые строки

Развертываемые строки (Expandable Rows) в Element Plus позволяют отображать дополнительную информацию для каждой строки таблицы без необходимости создания отдельной таблицы или страницы. Эта функциональность особенно полезна при работе с большими объемами данных, где требуется краткий обзор с возможностью раскрытия деталей.

Основная концепция

В Element Plus компонент <el-table> поддерживает слоты для развертываемых строк. Основные моменты:

  • Для активации развертывания используется слот expand.
  • Каждая раскрываемая строка привязана к данным строки.
  • Управление открытием и закрытием осуществляется автоматически или вручную через свойства и методы.
<el-table :data="tableData" style="width: 100%">
  <el-table-column type="expand">
    <template #default="props">
      <p>Дополнительная информация: {{ props.row.details }}</p>
    </template>
  </el-table-column>
  <el-table-column prop="name" label="Имя"></el-table-column>
  <el-table-column prop="age" label="Возраст"></el-table-column>
</el-table>

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

  • type="expand" указывает, что колонка будет отвечать за развертывание.
  • Слот default получает объект props, содержащий данные текущей строки (props.row).
  • Любая разметка внутри слота автоматически будет отображена при раскрытии строки.

Управление состоянием раскрытия

Для управления раскрытием строк можно использовать свойства:

  • row-key — уникальный идентификатор строки, необходим для корректного управления состоянием.
  • default-expand-all — открывает все строки при первоначальной загрузке таблицы.
  • Методы toggleRowExpansion(row, expanded) и toggleAllExpansion(expanded) позволяют программно раскрывать или закрывать строки.
<el-table
  :data="tableData"
  row-key="id"
  :default-expand-all="false"
  ref="tableRef"
  style="width: 100%"
>
  <el-table-column type="expand">
    <template #default="props">
      <p>{{ props.row.details }}</p>
    </template>
  </el-table-column>
  <el-table-column prop="name" label="Имя"></el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Иван', details: 'Детали по Ивану' },
        { id: 2, name: 'Мария', details: 'Детали по Марии' }
      ]
    };
  },
  methods: {
    expandRow(row) {
      this.$refs.tableRef.toggleRowExpansion(row, true);
    },
    collapseRow(row) {
      this.$refs.tableRef.toggleRowExpansion(row, false);
    }
  }
};
</script>

Особенности:

  • row-key="id" — обязательное свойство при динамическом управлении раскрытием.
  • toggleRowExpansion принимает два аргумента: объект строки и логическое значение expanded.

Настройка внешнего вида

Содержимое развертываемой строки можно оформить любым образом:

  • Использовать таблицы, карточки, списки или пользовательские компоненты.
  • Применять стили CSS и классы для создания визуального разделения.
  • Включать интерактивные элементы, такие как кнопки и ссылки.
<template #default="props">
  <el-card shadow="hover">
    <h4>Детали пользователя</h4>
    <p>Имя: {{ props.row.name }}</p>
    <p>Возраст: {{ props.row.age }}</p>
    <el-button type="primary" size="small">Редактировать</el-button>
  </el-card>
</template>

Выделение деталей в карточке делает интерфейс более читаемым и аккуратным, особенно при работе с большими таблицами.

Асинхронная загрузка данных

Развертываемые строки могут загружать данные динамически, что повышает производительность:

  • Использовать события раскрытия для запроса данных с сервера.
  • Хранить загруженные данные в состоянии строки.
<el-table-column type="expand">
  <template #default="props">
    <div v-if="!props.row.details">
      Загружаем данные...
    </div>
    <div v-else>
      {{ props.row.details }}
    </div>
  </template>
</el-table-column>

<script>
methods: {
  async loadDetails(row) {
    if (!row.details) {
      const response = await fetch(`/api/details/${row.id}`);
      row.details = await response.json();
    }
  }
}
</script>

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

Советы по производительности

  • Не создавать слишком сложные разметки в каждой раскрываемой строке при большом объёме данных.
  • Использовать v-if для условного рендеринга компонентов внутри слота.
  • Применять ленивую загрузку или пагинацию для таблиц с тысячами строк.

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

Оглавление