Collapse

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

Импорт и регистрация компонента

Для использования Collapse необходимо импортировать компоненты ElCollapse и ElCollapseItem:

import { ElCollapse, ElCollapseItem } from 'element-plus';

В Vue 3 можно использовать их глобально через app.use(ElementPlus) или локально в компоненте через объект components:

export default {
  components: {
    ElCollapse,
    ElCollapseItem
  }
}

Простая реализация

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

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="Панель 1" name="1">
      Содержимое панели 1
    </el-collapse-item>
    <el-collapse-item title="Панель 2" name="2">
      Содержимое панели 2
    </el-collapse-item>
    <el-collapse-item title="Панель 3" name="3">
      Содержимое панели 3
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1'] // Панель 1 открыта по умолчанию
    };
  }
};
</script>
  • v-model="activeNames" управляет состоянием открытых панелей.
  • name указывает уникальный идентификатор каждой панели.
  • Можно использовать строку или массив, в зависимости от того, разрешено ли открытие нескольких панелей одновременно.

Разрешение множественного раскрытия

Чтобы разрешить открытие нескольких панелей одновременно, используется атрибут accordion:

<el-collapse v-model="activeNames" accordion>
  <el-collapse-item title="Панель 1" name="1">Контент 1</el-collapse-item>
  <el-collapse-item title="Панель 2" name="2">Контент 2</el-collapse-item>
</el-collapse>
  • При accordion открыта может быть только одна панель.
  • Без accordion можно передавать массив activeNames для одновременного открытия нескольких элементов.

Работа с динамическими данными

Collapse отлично интегрируется с массивами данных и циклом v-for:

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item
      v-for="item in panels"
      :key="item.id"
      :title="item.title"
      :name="item.id.toString()"
    >
      {{ item.content }}
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: [],
      panels: [
        { id: 1, title: 'Панель A', content: 'Контент A' },
        { id: 2, title: 'Панель B', content: 'Контент B' },
        { id: 3, title: 'Панель C', content: 'Контент C' }
      ]
    };
  }
};
</script>
  • Динамическая генерация упрощает масштабирование интерфейса.
  • Можно подключать данные из API и управлять состоянием открытых панелей через реактивные свойства.

Настройка и стилизация

Collapse поддерживает кастомизацию через атрибуты:

  • border — отображение рамки вокруг панелей.
  • accordion — запрет множественного открытия.
  • value или v-model — текущие активные панели.
  • expand-icon — кастомная иконка раскрытия.

Пример с кастомной иконкой:

<el-collapse v-model="activeNames" :expand-icon="renderIcon">
  <el-collapse-item title="Панель с кастомной иконкой" name="1">
    Контент панели
  </el-collapse-item>
</el-collapse>

<script>
import { ArrowRight } from '@element-plus/icons-vue';

export default {
  components: { ArrowRight },
  data() {
    return { activeNames: [] };
  },
  methods: {
    renderIcon() {
      return <ArrowRight />;
    }
  }
};
</script>

Программное управление

Открытие и закрытие панелей можно контролировать через реактивные свойства:

this.activeNames = ['2']; // открывает панель с name="2"
this.activeNames.push('3'); // открывает еще одну панель (если accordion=false)

Также можно подписываться на события:

  • change — вызывается при изменении состояния открытых панелей:
<el-collapse v-model="activeNames" @change="handleChange">
methods: {
  handleChange(val) {
    console.log('Открытые панели:', val);
  }
}

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

  • Для больших массивов элементов лучше использовать v-for с уникальными :key для предотвращения лишнего рендеринга.
  • Не рекомендуется держать в DOM слишком много открытых панелей одновременно — это влияет на производительность интерфейса.
  • Можно лениво загружать содержимое панелей с помощью v-if внутри el-collapse-item.

Интеграция с другими компонентами

Collapse часто комбинируют с:

  • Form — для сворачивания форм и секций настроек.
  • Tabs — для создания многоуровневой навигации.
  • Table — для раскрытия дополнительной информации о строке таблицы.

Использование Collapse повышает читаемость интерфейса и упрощает работу с большими объемами данных, позволяя пользователю фокусироваться только на нужной информации.

Оглавление