Тема
SList
Обзор
Список: статический, дерево, виртуализация и infinite scroll.
Usage
Плоский список с виртуализацией.
API
Краткий справочник props, slots и events — см. API Reference.
Guide
SList отображает коллекцию строк и поддерживает несколько режимов: плоский список, дерево, виртуализацию длинных списков и подгрузку при скролле. Строки оформляйте через SListItem.
Дерево
Иерархический список с expand/collapse.
Виртуальный скролл
Подгрузка при скролле
Декларативные элементы
API Reference
Свойства
| Имя | Тип | Описание | По умолчанию |
|---|---|---|---|
items | TItem[] | Плоский или древовидный набор элементов. | — |
itemKey | TListItemKeyResolver<TItem> | Ключ строки для v-for и выбора. | 'id' |
childrenKey | keyof TItem & string | Поле с дочерними элементами для дерева. | 'children' |
titleKey | keyof TItem & string | Поле заголовка строки. | 'title' |
subtitleKey | keyof TItem & string | Поле подзаголовка строки. | 'subtitle' |
iconLeftKey | keyof TItem & string | Поле имени иконки слева. | 'iconLeft' |
disabledKey | keyof TItem & string | Поле флага disabled. | 'disabled' |
itemProps | (…) => … | Дополнительные пропсы и attrs (например, data-qa) для SListItem по элементу. | — |
selectionMode | ESelectionMode | Режим выбора строк. | 'none' |
mandatory | boolean | Запрещает снятие выбора в single-режиме. | false |
virtual | boolean | Виртуальный скролл для длинных списков. | — |
gap | ESListGap | Вертикальный промежуток между строками. | DEFAULT_LIST_GAP |
estimateItemSize | number | Оценка высоты строки для виртуализации. | 36 |
overscan | number | Число строк вне viewport, рендеримых заранее. | 5 |
endReachedDistance | number | Расстояние до низа списка для события end-reached. | 0 |
canLoadMore | (…) => … | Предикат: можно ли запрашивать следующую порцию данных. | — |
height | number | string | Высота контейнера списка. | 320 |
maxHeight | number | string | Максимальная высота скролла при height: auto. | — |
revealRight | boolean | Показывать правую колонку действий при наведении. | false |
expandOnClick | boolean | Клик по строке с потомками сворачивает/разворачивает ветку. | false |
selectedOnTop | boolean | Плоские списки: выбранные строки группируются сверху, между группами — разделитель. Для деревьев игнорируется. | false |
hasMoreChildrenKey | keyof TItem & string | Поле-флаг «у раскрытого узла есть ещё дети для догрузки»; включает синтетическую строку «Показать ещё». | — |
loadingMoreChildrenKeys | TItem[] | Ключи узлов, для которых сейчас идёт догрузка детей (в их строке «Показать ещё» — спиннер). | [] |
modelValue / v-model:expanded | string[] | Двустороннее значение для v-model:expanded. | [] |
modelValue / v-model | string | undefined | Двустороннее значение компонента (v-model). | — |
modelValue / v-model:selected | string | string[] | undefined | Двустороннее значение для v-model:selected. | — |
События
| Имя | Описание | Payload |
|---|---|---|
endReached | Достигнут конец списка при прокрутке или виртуализации. | { direction: 'bottom' } |
loadMoreChildren | Запрос догрузки детей конкретного узла из строки «Показать ещё». | { key: string; item: TItem } |
itemClick | Клик (или Enter/Space) по штатной строке; для строк из слота item не эмитится. | { key: string; item: TItem } |
Слоты
| Имя | Описание |
|---|---|
loadMore | Строка «Показать ещё» для догрузки детей узла |
item | Кастомная строка; scope — данные строки и toggleExpanded |
itemIconLeft | Иконка слева штатной строки; scope — данные строки |
itemTitle | Заголовок штатной строки; scope — данные строки |
itemSubtitle | Подзаголовок штатной строки; scope — данные строки |
default | Произвольные SListItem без prop items |