Tabs

Компонент Tabs в библиотеке Element Plus позволяет создавать интерфейсы с вкладками, обеспечивая удобную организацию контента и навигации. Он состоит из контейнера <el-tabs> и отдельных вкладок <el-tab-pane>.

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Первая вкладка" name="first">
      Содержимое первой вкладки
    </el-tab-pane>
    <el-tab-pane label="Вторая вкладка" name="second">
      Содержимое второй вкладки
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'first'
    }
  }
}
</script>
  • v-model связывает активную вкладку с переменной activeTab.
  • Атрибут label задаёт заголовок вкладки.
  • Атрибут name используется для идентификации вкладки при программной смене.

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

Для динамического управления вкладками используются методы Element Plus, а также реактивные переменные Vue.

<template>
  <el-tabs v-model="activeTab" @tab-click="handleTabClick">
    <el-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :label="tab.label"
      :name="tab.name"
    >
      {{ tab.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1',
      tabs: [
        { name: 'tab1', label: 'Вкладка 1', content: 'Содержимое 1' },
        { name: 'tab2', label: 'Вкладка 2', content: 'Содержимое 2' }
      ]
    }
  },
  methods: {
    handleTabClick(tab) {
      console.log('Активная вкладка:', tab.name)
    }
  }
}
</script>

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

  • Использование v-for позволяет динамически создавать вкладки.
  • Событие @tab-click срабатывает при клике на вкладку, передавая объект вкладки с полями name и label.

Вертикальные вкладки

По умолчанию вкладки отображаются горизонтально. Для вертикальной ориентации используется атрибут tab-position="left" или "right".

<el-tabs v-model="activeTab" tab-position="left">
  <el-tab-pane label="Панель A" name="a">Контент A</el-tab-pane>
  <el-tab-pane label="Панель B" name="b">Контент B</el-tab-pane>
</el-tabs>
  • tab-position может принимать значения: "top", "right", "bottom", "left".
  • Вертикальные вкладки автоматически адаптируют ширину панели.

Динамическое добавление и удаление вкладок

Для сложных интерфейсов часто требуется добавление и удаление вкладок на лету. Это реализуется через массив данных и реактивное управление v-model.

<template>
  <el-button @click="addTab">Добавить вкладку</el-button>
  <el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab">
    <el-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :label="tab.label"
      :name="tab.name"
      closable
    >
      {{ tab.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
let id = 3

export default {
  data() {
    return {
      activeTab: 'tab1',
      tabs: [
        { name: 'tab1', label: 'Вкладка 1', content: 'Контент 1' },
        { name: 'tab2', label: 'Вкладка 2', content: 'Контент 2' }
      ]
    }
  },
  methods: {
    addTab() {
      const newName = `tab${id}`
      this.tabs.push({ name: newName, label: `Вкладка ${id}`, content: `Контент ${id}` })
      this.activeTab = newName
      id++
    },
    removeTab(targetName) {
      this.tabs = this.tabs.filter(tab => tab.name !== targetName)
      if (this.activeTab === targetName && this.tabs.length) {
        this.activeTab = this.tabs[0].name
      }
    }
  }
}
</script>
  • Атрибут type="card" задаёт стиль вкладок с визуально отделяемыми карточками.
  • Атрибут closable на вкладке позволяет её закрыть.
  • Событие @tab-remove автоматически передаёт name удаляемой вкладки.

Стилизация вкладок

Element Plus предоставляет несколько вариантов кастомизации:

  • Типы вкладок:

    • card — карточки с границами
    • border-card — карточки с рамкой вокруг контента
    • default — стандартный стиль
<el-tabs v-model="activeTab" type="border-card">
  <el-tab-pane label="Вкладка 1" name="1">Контент 1</el-tab-pane>
  <el-tab-pane label="Вкладка 2" name="2">Контент 2</el-tab-pane>
</el-tabs>
  • Активная вкладка выделяется цветом темы Element Plus.
  • Для кастомной стилизации можно использовать scoped CSS или классы el-tabs__header и el-tab-pane.
.el-tabs__header {
  background-color: #f5f7fa;
}
.el-tab-pane {
  padding: 20px;
  font-size: 14px;
}

Ленивая загрузка содержимого вкладок

Атрибут lazy позволяет загружать контент вкладки только при её активации, что улучшает производительность:

<el-tabs v-model="activeTab" lazy>
  <el-tab-pane label="Вкладка A" name="a">
    Данные загружаются при первом открытии
  </el-tab-pane>
  <el-tab-pane label="Вкладка B" name="b">
    Статический контент
  </el-tab-pane>
</el-tabs>
  • При использовании lazy содержимое не рендерится до первого клика по вкладке.

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

Можно синхронизировать вкладки с маршрутизатором Vue, используя v-model и отслеживание изменений маршрута:

watch: {
  $route(to) {
    this.activeTab = to.query.tab || 'tab1'
  }
}
  • Такой подход позволяет сохранять состояние вкладок при переходах между страницами.

Всплывающие подсказки и иконки

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

<el-tabs v-model="activeTab">
  <el-tab-pane
    label="Настройки"
    name="settings"
    :tooltip="'Откройте панель настроек'"
  >
    Контент панели настроек
  </el-tab-pane>
  <el-tab-pane
    label="Профиль"
    name="profile"
  >
    <i class="el-icon-user"></i> Контент профиля
  </el-tab-pane>
</el-tabs>
  • Атрибут tooltip задаёт всплывающую подсказку при наведении.
  • Для вставки иконок можно использовать встроенные классы Element Plus (el-icon-*) или сторонние иконки.

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

Оглавление