Expandable rows

В библиотеке Naive UI компонент таблицы (n-data-table) предоставляет возможность создавать разворачиваемые строки, которые позволяют отображать дополнительную информацию о записи без перегрузки основной таблицы. Основной принцип заключается в том, что каждая строка может иметь вложенный контент, который отображается по клику на специальный элемент управления или по заданным условиям.

import { createApp, h } from 'vue'
import { NDataTable } from 'naive-ui'

const columns = [
  {
    title: 'Имя',
    key: 'name'
  },
  {
    title: 'Возраст',
    key: 'age'
  },
  {
    title: 'Профессия',
    key: 'job'
  }
]

const data = [
  { key: 1, name: 'Иван', age: 28, job: 'Инженер', details: 'Дополнительная информация об Иване' },
  { key: 2, name: 'Мария', age: 34, job: 'Дизайнер', details: 'Дополнительная информация о Марии' }
]

createApp({
  setup() {
    const renderExpandedRow = (row) => {
      return h('div', { style: { padding: '12px', color: '#555' } }, row.details)
    }

    return () => h(NDataTable, {
      columns,
      data,
      rowExpandable: (row) => !!row.details,
      renderExpandedRow
    })
  }
}).mount('#app')

Ключевые свойства

  • rowExpandable – функция, которая определяет, можно ли развернуть конкретную строку. Возвращает true или false.
  • renderExpandedRow – функция рендера для содержимого разворачиваемой строки. Получает объект строки в качестве аргумента.
  • expandOnRowClick – булевое свойство, позволяющее разворачивать строку при клике на неё целиком, а не только на иконку.
  • expandedRowKeys / v-model:expandedRowKeys – массив ключей строк, которые развернуты. Позволяет управлять состоянием разворачивания программно.

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

Для удобства восприятия и визуального разделения разворачиваемых строк можно использовать кастомные стили или встроенные компоненты Naive UI. Например, обернуть содержимое в n-card или добавить отступы и фоновый цвет:

const renderExpandedRow = (row) => {
  return h('div', { style: { padding: '16px', backgroundColor: '#f9f9f9', borderRadius: '4px' } }, [
    h('strong', {}, 'Детали: '),
    h('span', {}, row.details)
  ])
}

Управление раскрытием через программный код

Иногда требуется открывать или закрывать строки динамически, например, при изменении состояния других компонентов. Для этого используется свойство v-model:expandedRowKeys:

import { ref } from 'vue'

const expandedKeys = ref([1]) // строка с key=1 изначально развернута

<NDataTable
  columns={columns}
  data={data}
  rowExpandable={(row) => !!row.details}
  renderExpandedRow={renderExpandedRow}
  v-model:expandedRowKeys={expandedKeys}
/>

Методы манипуляции массивом expandedKeys позволяют разворачивать/сворачивать строки:

// Развернуть все строки
expandedKeys.value = data.filter(row => row.details).map(row => row.key)

// Свернуть все строки
expandedKeys.value = []

События разворачивания

Naive UI предоставляет события, которые помогают отслеживать действия пользователя:

  • onExpand – вызывается при раскрытии строки.
  • onCollapse – вызывается при закрытии строки.

Пример использования:

<NDataTable
  columns={columns}
  data={data}
  rowExpandable={(row) => !!row.details}
  renderExpandedRow={renderExpandedRow}
  onExp and={(row) => console.log('Раскрыта строка:', row)}
  onColla pse={(row) => console.log('Свернута строка:', row)}
/>

Вложенные таблицы и компоненты

Разворачиваемые строки могут содержать другие таблицы, списки, формы или любые Vue-компоненты. Это особенно полезно для отображения связанных данных, например, заказов пользователя или истории изменений:

const renderExpandedRow = (row) => {
  return h(NDataTable, {
    columns: [{ title: 'Дата', key: 'date' }, { title: 'Сумма', key: 'amount' }],
    data: row.orders || []
  })
}

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

  1. Использовать rowExpandable, чтобы не создавать разворачиваемое содержимое для всех строк сразу.
  2. При большом количестве данных рекомендуется ленивый рендеринг с виртуализацией.
  3. Минимизировать сложные вычисления внутри renderExpandedRow. Лучше подготовить данные заранее.

Итоговая структура

Разворачиваемые строки в Naive UI обеспечивают гибкость, позволяя добавлять дополнительные уровни информации без перегрузки интерфейса. Они полностью управляемы через свойства и события, поддерживают динамическое управление и позволяют использовать любые Vue-компоненты для отображения детализированных данных.

Оглавление