Tree table

Tree Table — это компонент для отображения иерархических данных в виде таблицы с возможностью разворачивания и сворачивания узлов. В Naive UI этот компонент реализован через n-tree-table, который сочетает функциональность обычной таблицы с поддержкой древовидной структуры.

Ключевые свойства компонента:

  • columns — массив объектов, описывающих колонки таблицы. Каждая колонка может иметь поля: title, key, render, width, sortable, align.
  • data — массив объектов, представляющих строки. Каждый объект может содержать поле children для вложенных элементов.
  • row-key — уникальный ключ строки, обязательный для корректной работы развертывания и идентификации узлов.
  • expandable — функция или булево значение, определяющее, может ли строка быть развернута.
  • default-expanded-keys — массив ключей строк, которые должны быть развернуты при инициализации.

Пример минимальной конфигурации Tree Table:

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

const columns = [
  { title: 'Имя', key: 'name', width: 200 },
  { title: 'Возраст', key: 'age', width: 100 },
  { title: 'Должность', key: 'position', width: 150 }
]

const data = [
  { key: 1, name: 'Иван', age: 30, position: 'Разработчик', children: [
    { key: 2, name: 'Мария', age: 25, position: 'Младший разработчик' }
  ]}
]

createApp({
  render: () => h(NTreeTable, {
    columns,
    data,
    rowKey: 'key',
    defaultExpandedKeys: [1]
  })
}).mount('#app')

Колонки и кастомизация отображения

Для Tree Table можно использовать слот render, позволяющий создавать кастомный контент для ячеек. Это особенно полезно, если требуется форматирование текста, добавление иконок или кнопок:

const columns = [
  {
    title: 'Имя',
    key: 'name',
    render(row) {
      return h('span', { style: { color: 'blue' } }, row.name)
    }
  }
]

Колонки поддерживают сортировку (sortable) и выравнивание (align: 'left' | 'center' | 'right'). Для динамического форматирования можно использовать вычисляемые свойства в render.

Управление состоянием узлов

Разворачивание и сворачивание осуществляется через expanded-keys и события:

  • on-update:expanded-keys — вызывается при изменении состояния узлов.
  • expandable — функция, которая определяет, можно ли развернуть конкретный узел. Например:
expandable: row => !!row.children && row.children.length > 0

Программное управление состоянием позволяет создавать Tree Table с полностью контролируемым поведением, включая динамическую подгрузку данных при раскрытии узла.

Поддержка больших данных

Для работы с большими наборами данных Tree Table поддерживает виртуализацию строк через свойство virtual-scroll. Это снижает нагрузку на рендеринг и улучшает производительность:

<NTreeTable
  :columns="columns"
  :data="data"
  row-key="key"
  :virtual-scroll="{ itemHeight: 40 }"
/>

Динамическая загрузка данных

Naive UI позволяет подгружать дочерние элементы по требованию, что полезно при работе с API:

async function loadChildren(row) {
  const children = await fetch(`/api/children?parentId=${row.id}`).then(r => r.json())
  row.children = children
}

Можно комбинировать с событием on-update:expanded-keys, чтобы подгружать данные только при первом раскрытии узла.

Стилизация и темы

Tree Table наследует тему Naive UI, поэтому можно использовать глобальные настройки цветов, шрифтов и размеров:

import { createTheme } from 'naive-ui'

const themeOverrides = {
  common: {
    primaryColor: '#4caf50'
  },
  Table: {
    thColor: '#f0f0f0',
    tdColor: '#ffffff'
  }
}

Кроме глобальной темы, возможна локальная стилизация отдельных ячеек через render или class в колонках.

События и интерактивность

Tree Table поддерживает множество событий для реализации интерактивности:

  • on-row-click — клик по строке.
  • on-row-dblclick — двойной клик.
  • on-expand — раскрытие узла.
  • on-collapse — сворачивание узла.
  • on-selection-change — изменение выбранных строк (при использовании селекторов).

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

Резюме по ключевым особенностям

  • Полная поддержка иерархии через поле children.
  • Контролируемое разворачивание через expanded-keys и expandable.
  • Кастомизация отображения через слот render.
  • Сортировка и выравнивание в колонках.
  • Виртуализация для больших наборов данных.
  • Динамическая подгрузка дочерних элементов.
  • Поддержка событий и локальной стилизации.

Tree Table в Naive UI сочетает гибкость обычной таблицы с удобством работы с древовидными структурами, что делает его универсальным инструментом для построения интерфейсов с вложенными данными.

Оглавление