Адаптивные таблицы

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

Ключевые возможности:

  • Горизонтальная прокрутка для таблиц с большим количеством колонок.
  • Автоматическая подгонка ширины столбцов под содержимое.
  • Скрытие и раскрытие колонок при уменьшении ширины экрана.
  • Поддержка сортировки, фильтров и пагинации в адаптивном режиме.

Настройка базовой адаптивной таблицы

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    stripe
    border
    :max-height="500"
  >
    <el-table-column
      prop="date"
      label="Дата"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Имя"
      min-width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Адрес"
      min-width="200">
    </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: 'ул. Пушкина, 22' },
        { date: '2026-03-16', name: 'Алексей', address: 'ул. Чехова, 5' },
      ]
    }
  }
}
</script>

Разбор:

  • style="width: 100%" позволяет таблице растягиваться на всю ширину контейнера.
  • stripe добавляет полосатую раскраску строк.
  • border активирует границы ячеек.
  • max-height ограничивает высоту таблицы, включая вертикальную прокрутку.

Горизонтальная прокрутка

Для таблиц с большим количеством столбцов важно использовать горизонтальную прокрутку. Это достигается комбинацией min-width для колонок и CSS-свойства overflow-x: auto на контейнере.

<div style="overflow-x: auto;">
  <el-table
    :data="tableData"
    style="min-width: 800px"
  >
    <el-table-column prop="id" label="ID" width="80"></el-table-column>
    <el-table-column prop="name" label="Имя" width="150"></el-table-column>
    <el-table-column prop="email" label="Email" width="200"></el-table-column>
    <el-table-column prop="phone" label="Телефон" width="150"></el-table-column>
    <el-table-column prop="address" label="Адрес" width="250"></el-table-column>
  </el-table>
</div>

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

  • min-width задаёт минимальную ширину таблицы, что предотвращает сжатие колонок до нечитаемого состояния.
  • Контейнер с overflow-x: auto обеспечивает возможность прокрутки на мобильных устройствах.

Адаптивное скрытие колонок

Element Plus не предоставляет встроенного решения для динамического скрытия колонок по ширине экрана, но можно реализовать через реактивные данные и v-if.

<el-table :data="tableData" style="width: 100%">
  <el-table-column
    prop="id"
    label="ID"
    width="80"
    v-if="windowWidth > 600">
  </el-table-column>
  <el-table-column prop="name" label="Имя" min-width="120"></el-table-column>
  <el-table-column
    prop="email"
    label="Email"
    min-width="200"
    v-if="windowWidth > 800">
  </el-table-column>
</el-table>
data() {
  return {
    windowWidth: window.innerWidth,
    tableData: [...],
  }
},
mounted() {
  window.addEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    this.windowWidth = window.innerWidth;
  }
}

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

  • Реактивная переменная windowWidth отслеживает размер окна.
  • Колонки отображаются условно через v-if в зависимости от ширины экрана.
  • Это позволяет скрывать менее важные данные на мобильных устройствах.

Сортировка и фильтры в адаптивной таблице

Адаптивные таблицы сохраняют функциональность сортировки и фильтров:

<el-table-column
  prop="name"
  label="Имя"
  sortable
  :filters="[{ text: 'Иван', value: 'Иван' }, { text: 'Мария', value: 'Мария' }]"
  :filter-method="filterHandler"
></el-table-column>
methods: {
  filterHandler(value, row) {
    return row.name === value;
  }
}
  • sortable включает сортировку по колонке.
  • filters и filter-method создают фильтрацию данных.

Пагинация и адаптивность

Для длинных таблиц рекомендуется использовать компонент el-pagination, который автоматически подстраивается под размер экрана.

<el-pagination
  background
  layout="prev, pager, next, jumper"
  :total="100"
  :page-size="10"
  @current-change="handlePageChange">
</el-pagination>
methods: {
  handlePageChange(page) {
    console.log('Текущая страница:', page);
  }
}
  • layout задаёт элементы управления пагинацией.
  • Адаптивность достигается благодаря минимальной ширине таблицы и горизонтальной прокрутке.

Резиновая ширина колонок

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

<el-table-column prop="name" label="Имя" min-width="150"></el-table-column>
<el-table-column prop="address" label="Адрес" min-width="250"></el-table-column>

Эта стратегия особенно полезна при работе с мобильными устройствами, где ширина экрана ограничена.

Итоговая структура адаптивной таблицы

  • Контейнер с overflow-x: auto.
  • Таблица с style="width: 100%" и минимальными ширинами колонок.
  • Скрытие и отображение колонок через реактивные условия.
  • Сортировка и фильтры сохраняются.
  • Пагинация с компонентом el-pagination.
  • Горизонтальная прокрутка при переполнении.

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

Оглавление