Колонки и их настройка

В Naive UI таблицы и списки часто требуют точной настройки колонок для корректного отображения данных. Колонки представляют собой объекты с набором свойств, определяющих их заголовок, ключ, ширину, выравнивание, форматирование и поведение при изменении размера окна. Основная структура колонок задаётся через массив объектов, передаваемый в компонент n-data-table или n-table.

const columns = [
  {
    title: 'Имя',
    key: 'name',
    width: 150,
    align: 'left',
  },
  {
    title: 'Возраст',
    key: 'age',
    width: 100,
    align: 'center',
  },
  {
    title: 'Профессия',
    key: 'job',
    width: 200,
    align: 'left',
  }
]
  • title — текст заголовка колонки.
  • key — уникальный ключ, соответствующий полю данных.
  • width — ширина колонки в пикселях или процентах.
  • align — выравнивание содержимого: 'left', 'center', 'right'.

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

Для сложных таблиц с большим количеством данных часто требуется фиксировать определённые колонки. Свойство fixed позволяет закрепить колонку слева или справа.

{
  title: 'ID',
  key: 'id',
  width: 80,
  fixed: 'left'
}
  • 'left' — колонка закреплена слева.
  • 'right' — колонка закреплена справа.

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

{
  title: 'Описание',
  key: 'description',
  minWidth: 200,
  align: 'left'
}

Форматирование содержимого

Для кастомного отображения данных используется слот render или функция render внутри колонки. Это позволяет выводить не просто текст, а сложные компоненты, кнопки, иконки и условное форматирование.

{
  title: 'Статус',
  key: 'status',
  render: (row) => {
    return row.status === 'active'
      ? h('span', { style: { color: 'green' } }, 'Активен')
      : h('span', { style: { color: 'red' } }, 'Неактивен')
  }
}

Функция render принимает текущую строку данных и индекс, что даёт полный контроль над визуализацией содержимого колонки.

Сортировка и фильтрация

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

{
  title: 'Возраст',
  key: 'age',
  sortable: true
}
  • sortable — включает сортировку данных по колонке.
  • filters — массив объектов с text и value для фильтрации по конкретным значениям.
{
  title: 'Страна',
  key: 'country',
  filters: [
    { text: 'Россия', value: 'RU' },
    { text: 'США', value: 'US' },
    { text: 'Германия', value: 'DE' }
  ],
  filterMultiple: true
}
  • filterMultiple — определяет возможность множественного выбора фильтров.
  • filterMethod — функция для кастомной фильтрации строк на основе значения фильтра.

Управление порядком колонок

Naive UI поддерживает динамическую перестановку колонок с помощью свойства draggable. Колонки могут быть перетаскиваемыми, что удобно для интерфейсов с пользовательскими настройками отображения.

{
  title: 'Email',
  key: 'email',
  draggable: true
}

События on-column-drag-start и on-column-drag-end позволяют отслеживать начало и завершение перетаскивания для обновления состояния приложения.

Объединение колонок

С помощью children можно создавать многоуровневые заголовки, объединяя несколько колонок под одной группой:

{
  title: 'Контактные данные',
  key: 'contact',
  children: [
    { title: 'Email', key: 'email', width: 200 },
    { title: 'Телефон', key: 'phone', width: 150 }
  ]
}

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

Динамическая настройка колонок

Колонки могут изменяться на лету через реактивные объекты Vue. Это позволяет включать/выключать колонки, менять их ширину, порядок или добавлять новые без перезагрузки компонента:

const columns = reactive([
  { title: 'Имя', key: 'name', width: 150 },
  { title: 'Возраст', key: 'age', width: 100 }
])

function addColumn() {
  columns.push({ title: 'Профессия', key: 'job', width: 200 })
}

Реактивность гарантирует, что таблица автоматически обновится при изменении массива колонок.

Итоговые рекомендации

  • Всегда задавать key для каждой колонки для корректного рендеринга и оптимизации.
  • Использовать minWidth для адаптивной ширины, особенно при работе с разными разрешениями экрана.
  • Для сложного форматирования данных применять render.
  • При необходимости закрепления колонок использовать fixed.
  • Для больших таблиц и пользовательских интерфейсов применять динамическое управление колонками через реактивные объекты.

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

Оглавление