Таблица

Для отображения табличных данных <b-table> поддерживает нумерацию страниц, фильтрацию, сортировку, пользовательскую визуализацию, различные параметры стиля, события и асинхронные данные. Для простого отображения табличных данных без всяких причудливых функций BootstrapVue предоставляет два облегченных альтернативных компонента <b-table-lite> и <b-table-simple>.

Справочник по компонентам

`<b-table>`

Смотреть источник

<b-table> Свойства
<b-table> v-model
<b-table> Слоты
<b-table> События
<b-table> $root Прослушиватели событий

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`api-url`	`String`		Пройти через свойство. Передано как часть объекта контекста, отправленного в функцию поставщика элементов
`bordered`	`Boolean`	`false`	Добавляет границы ко всем ячейкам и заголовкам
`borderless`	`Boolean`	`false`	Удаляет все границы ячеек
`busy`	`Boolean`	`false`	Если установлено, переводит таблицу в состояние занятости. Автоматически устанавливается при вызове функции поставщика элементов
`caption`	`String`		Текстовая строка для размещения в элементе заголовка
`caption-html` Использовать с осторожностью	`String`		Строка HTML для размещения в элементе заголовка
`caption-top`	`Boolean`	`false`	Визуально поместите заголовок таблицы над таблицей. Значение по умолчанию ниже
`current-page`	`Number` или `String`	`1`	Текущий номер страницы, отображаемый при разбиении таблицы на страницы. Начиная с 1 и выше
`dark`	`Boolean`	`false`	Переводит таблицу в темный режим
`details-td-class` v2.1.0+	`Array` или `Object` или `String`		Класс (или классы) CSS для применения к элементу' `td` сведений о строке для слота row-details
`empty-filtered-html` Использовать с осторожностью	`String`		Строка HTML для отображения, когда в таблице нет элементов для отображения из-за фильтрации
`empty-filtered-text`	`String`	`'There are no records matching your request'`	Текстовая строка для отображения, когда в таблице нет элементов для отображения из-за фильтрации
`empty-html` Использовать с осторожностью	`String`		Строка HTML для отображения, когда в таблице нет элементов для отображения
`empty-text`	`String`	`'There are no records to show'`	Текстовая строка для отображения, когда в таблице нет элементов для отображения
`fields`	`Array`	`null`	Массив имен полей или массив объектов определения поля
`filter`	`Array` или `Object` или `String` или `RegExp`		Критерии фильтрации. Внутренняя фильтрация поддерживает только строковые критерии или критерии RegExpr
`filter-debounce` v2.0.0+	`Number` или `String`	`0`	Время в миллисекундах для отмены изменений в критериях фильтра перед фильтрацией записей
`filter-function`	`Function`		Ссылка на функцию, которую следует использовать вместо внутренней функции фильтрации. Подробнее смотрите в документации
`filter-ignored-fields`	`Array`	`[]`	Массив полей верхнего уровня, которые следует игнорировать при фильтрации данных элемента
`filter-included-fields`	`Array`	`[]`	Массив полей для включения при фильтрации. Переопределяет filter-ignore-fields
`fixed`	`Boolean`	`false`	Делает все столбцы одинаковой ширины (таблица с фиксированным макетом). Ускорит рендеринг для больших таблиц. Ширину столбцов можно задать с помощью CSS или colgroup
`foot-clone`	`Boolean`	`false`	Включить нижний колонтитул таблицы и клонировать содержимое заголовка по умолчанию
`foot-row-variant` v2.1.0+	`String`		Примените вариант цвета темы Bootstrap к элементу `tr` в файле `tfoot`. Возвращается к head-row-variant
`foot-variant`	`String`		Вариант нижнего колонтитула: 'light' или 'dark' или не установлен. Может иметь приоритет над foot-row-variant
`head-row-variant` v2.1.0+	`String`		Примените вариант цвета темы Bootstrap к элементу tr в thead
`head-variant`	`String`		Вариант верхнего колонтитула: 'light' or 'dark', или не установлен. Может иметь приоритет над head-row-variant
`hover`	`Boolean`	`false`	Включает стиль при наведении на строки
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`items`	`Array` или `Function`	`[]`	Массив отображаемых элементов или ссылка на функцию поставщика элементов. Подробнее смотрите в документации
`label-sort-asc`	`String`	`'Click to sort ascending'`	Скрытая строка для размещения в ячейке заголовка при нажатии на ячейку изменит направление сортировки на восходящую
`label-sort-clear`	`String`	`'Click to clear sorting'`	Скрытая строка для размещения в ячейке заголовка при нажатии на ячейку очистит текущее направление сортировки
`label-sort-desc`	`String`	`'Click to sort descending'`	Скрытая строка для размещения в ячейке заголовка при нажатии на ячейку изменит направление сортировки на убывающую
`no-border-collapse` v2.0.0+	`Boolean`	`false`	Отключить сворачивание границ таблицы. Полезно, когда таблица имеет липкие заголовки или столбцы
`no-footer-sorting`	`Boolean`	`false`	Когда используется встроенный форматер, установка этого свойства отключит возможность сортировки в нижнем колонтитуле
`no-local-sorting`	`Boolean`	`false`	Отключена процедура внутренней сортировки и ожидается, что пользователь предоставит отсортированные элементы. Элементы управления сортировкой по-прежнему будут доступны
`no-provider-filtering`	`Boolean`	`false`	Если установлено, использует внутреннюю фильтрацию для разбиения данных на страницы. В противном случае ожидается, что провайдер выполнит фильтрацию
`no-provider-paging`	`Boolean`	`false`	Если установлено, использует внутреннее разбиение на страницы для разбиения данных на страницы. В противном случае ожидается, что поставщик элементов выполнит пейджинг
`no-provider-sorting`	`Boolean`	`false`	Если установлено, использует внутреннюю сортировку для сортировки данных. В противном случае ожидается, что поставщик элементов выполнит сортировку
`no-select-on-click` v2.1.0+	`Boolean`	`false`	Отключить выбор строки с помощью событий щелчка. Выбор строки будет доступен только программно
`no-sort-reset`	`Boolean`	`false`	Когда таблица сортируется, щелчок по заголовку любого несортируемого столбца очистит текущие значения сортировки. Установите эту опору, чтобы отключить эту функцию
`outlined`	`Boolean`	`false`	Добавляет границу контура к элементу таблицы
`per-page`	`Number` или `String`	`0`	Количество строк для отображения на странице. Установите 0, чтобы отключить разбиение на страницы
`primary-key`	`String`		Имя поля таблицы, которое содержит гарантированное уникальное значение для каждой строки. Необходим для поддержки перехода tbody, а также ускоряет рендеринг таблицы
`responsive`	`Boolean` или `String`	`false`	Делает таблицу адаптивной по ширине, добавляя горизонтальную полосу прокрутки. Установите значение true, чтобы всегда реагировать, или установите одну из контрольных точек, чтобы переключиться с адаптивного режима на нормальный: 'sm', 'md', 'lg', 'xl'
`select-mode`	`String`	`'multi'`	Выбираемый режим для таблицы, когда установлен 'selectable'. Возможные значения: 'single', 'multi' или 'range'
`selectable`	`Boolean`	`false`	Если установлено, помещает строки тела таблицы в режим выбора
`selected-variant`	`String`	`'active'`	Вариант цветовой темы Bootstrap для установки выбранных строк. Используйте любой из стандартных цветовых вариантов темы Bootstrap или специальный вариант строки таблицы 'active' (по умолчанию). Установите пустую строку, чтобы не использовать вариант
`show-empty`	`Boolean`	`false`	Если этот параметр включен и нет записей элементов для отображения, отображается сообщение о том, что нет строк для отображения
`small`	`Boolean`	`false`	Визуализирует таблицу с меньшим заполнением ячеек
`sort-by`	`String`		Имя поля, которое в данный момент сортируется. Установите значение null, чтобы очистить сортировку. Синхронизируется с модификатором свойства .sync
`sort-compare`	`Function`		Ссылка на функцию для сортировки-сравнения двух строк данных. По умолчанию используется процедура сравнения внутренней сортировки. Подробнее смотрите документацию
`sort-compare-locale`	`Array` или `String`		Строка локали (или массив строк локали), указывающая язык при сортировке. Подробнее смотрите документацию
`sort-compare-options`	`Object`	`{ 'numeric': true }`	Объект, содержащий конфигурацию сортировки для метода 'String.prototype.sortLocale'. Подробнее смотрите документацию
`sort-desc`	`Boolean`	`false`	Установите значение true, чтобы отсортировать столбец в порядке убывания. Синхронизируется с модификатором свойства .sync
`sort-direction`	`String`	`'asc'`	Начальное направление сортировки для сортировки несортированного столбца по: 'asc', 'desc' или 'last' (для использования предыдущего направления сортировки)
`sort-icon-left`	`Boolean`	`false`	Помещает элемент управления сортировкой слева от текста заголовка. По умолчанию находится справа от текста заголовка
`sort-null-last`	`Boolean`	`false`	При сортировке нулевые и неопределенные значения будут отсортированы первыми (или последними, в зависимости от 'sort-desc'). Установите это свойство для сортировки нулевых значений в последнюю очередь. Применимо только к внутренней сортировке
`stacked`	`Boolean` или `String`	`false`	Поместите таблицу в режим стека. Установите значение true для всегда сложенных или установите одну из контрольных точек для переключения с сложенного на обычный: 'sm', 'md', 'lg', 'xl'
`sticky-header`	`Boolean` или `String`	`false`	Делает заголовок таблицы липким. Установите значение true для максимальной высоты таблицы высотой 300 пикселей или установите любую допустимую высоту CSS (включая единицы измерения)
`striped`	`Boolean`	`false`	Применяет чередование к строкам tbody
`table-class`	`Array` или `Object` или `String`		Класс CSS (или классы) для применения к элементу таблицы
`table-variant`	`String`		Примените вариант цвета темы Bootstrap ко всей таблице
`tbody-class`	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к элементу tbody
`tbody-tr-attr` v2.2.0+	`Object` или `Function`		Атрибуты, добавляемые к каждому tr в tbody, или функция, возвращающая такие атрибуты (Подробнее смотрите документацию)
`tbody-tr-class`	`Array` или `Object` или `String` или `Function`		CSS-класс (или классы) для применения к элементу tr в tbody. Может быть функцией, которая возвращает класс (Подробнее смотрите документацию)
`tbody-transition-handlers`	`Object`		Обработчики событий Vue 'transition-group'. При наличии сделает tbody компонентом Vue 'transition-group'
`tbody-transition-props`	`Object`		Свойства Vue 'transition-group'. При наличии сделает tbody компонентом Vue 'transition-group'
`tfoot-class`	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к элементу tfoot
`tfoot-tr-class`	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к элементу tr в tfoot
`thead-class`	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к элементу thead
`thead-tr-class`	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к элементу tr в thead
`value` v-model	`Array`	`[]`	Текущие отображаемые данные строки. Только для чтения. Не устанавливайте значение для этого свойства

Осторожно: Свойства, поддерживающие HTML-строки (*-html) может быть уязвим для Атаки межсайтового скриптинга (XSS) при передаче необработанных значений, предоставленных пользователем. Вы должны правильно очищать ввод пользователя!

`v-model`

Свойство	Событие
`value`	`input`

Слоты

Наименование (Click to sort ascending)	Область	Описание
`bottom-row`		Фиксированный слот нижнего ряда для пользовательских ячеек B-TD. Необязательно
`cell()`		Слот с областью действия по умолчанию для пользовательского рендеринга данных поля. Смотрите документацию для данных с ограниченной областью
`cell({key})`		Слот с заданной областью для пользовательского рендеринга полевых данных. '{key}' — имя ключа поля. Смотрите документацию для данных с ограниченной областью
`custom-foot`		Пользовательский слот содержимого нижнего колонтитула для предоставленных пользователем B-TR, B-TH, B-TD. Опционально ограниченный
`empty`		Содержимое для отображения, когда в массиве `items` нет элементов. Опционально ограниченный
`emptyfiltered`		Содержимое для отображения, когда в отфильтрованном массиве `items` нет элементов. Опционально ограниченный
`foot()`		Слот с областью действия по умолчанию для пользовательского рендеринга поля футера. Смотрите документацию для футера с ограниченной областью
`foot({key})`		Слот с заданной областью для пользовательского рендеринга нижнего колонтитула поля. '{key}' — имя ключа поля. Смотрите документацию для футера с ограниченной областью
`head()`		Слот с областью действия по умолчанию для пользовательского рендеринга заголовка поля. Смотрите документацию для заголовка с ограниченной областью
`head({key})`		Слот с заданной областью для пользовательского рендеринга заголовка поля. '{key}' — имя ключа поля. Смотрите документацию для заголовка с ограниченной областью
`row-details`		Слот с заданной областью для необязательного рендеринга дополнительных сведений о записи. Смотрите документацию для поддержки сведений о строках
`table-busy`	Нет	Необязательный слот для размещения сообщения о загрузке, когда таблица находится в состоянии занятости
`table-caption`	Нет	Содержимое для отображения в элементе заголовка таблицы
`table-colgroup`		Слот для размещения пользовательских элементов colgroup и col. Опционально ограниченный
`thead-top`		Слот над заголовками столбцов в элементе `thead` для пользовательских B-TR с B-TH/B-TD. Опционально ограниченный
`top-row`		Фиксированный слот верхнего ряда для пользовательских ячеек B-TD. Опционально ограниченный

События

Событие (Click to sort ascending)	Аргументы	Описание
`context-changed`	`ctx` - Объект контекста состояния таблицы. Посмотрите документацию	Генерируется всякий раз, когда изменяется контекст состояния таблицы
`filtered`	`filteredItems` - Массив элементов после фильтрации (до того, как произойдет локальное разбиение на страницы)	Генерируется, когда локальная фильтрация вызывает изменение количества элементов
`head-clicked`	`key` - Нажата клавиша столбца (имя поля) `field` - Объект определения поля `event` - Собственный объект события `isFooter` - 'True', если это событие возникло в результате нажатия на ячейку нижнего колонтитула	Генерируется при нажатии на ячейку верхнего или нижнего колонтитула. Не применимо для слота 'custom-foot'
`refreshed`		Генерируется, когда функция поставщика элементов данных вернула данные
`row-clicked`	`item` - Данные элемента строки, на которую нажали `index` - Индекс строки, на которую нажали `event` - Собственный объект события	Генерируется при нажатии на строку
`row-contextmenu`	`item` - Данные элемента строки, по которой щелкнули правой кнопкой мыши `index` - Индекс строки, по которой щелкнули правой кнопкой мыши `event` - Собственный объект события	Генерируется при щелчке правой кнопкой мыши по строке
`row-dblclicked`	`item` - Данные элемента строки по двойному щелчку `index` - Индекс строки, по которой дважды щелкнули `event` - Собственный объект события	Генерируется при двойном щелчке по строке
`row-hovered`	`item` - Данные элемента строки, на которую наведен курсор `index` - Индекс наводимой строки `event` - Собственный объект события	Генерируется при наведении курсора на строку
`row-middle-clicked`	`item` - Данные элемента строки, по которой щелкают средней кнопкой мыши `index` - Индекс строки, по которой щелкнули посередине `event` - Собственный объект события	Генерируется, когда строка щелкается средней кнопкой мыши
`row-selected`	`rows` - Массив выбранных элементов строки	Генерируется, когда строка или строки выбраны или не выбраны
`row-unhovered`	`item` - Данные элемента строки не отображаются `index` - Индекс строки, которая не зависает `event` - Собственный объект события	Генерируется, когда строка не наведена
`sort-changed`	`ctx` - Объект контекста состояния таблицы. Посмотрите документацию	Выдается при изменении сортировки в таблице

`$root` слушатели событий

Вы можете управлять <b-table>, генерируя следующие события на $root:

Событие	Аргументы	Описание
`bv::refresh::table`	`id` - Идентификатор таблицы для обновления данных	Обновить данные определенной таблицы, когда это событие генерируется в $root

`<b-table-lite>`

Смотреть источник

<b-table-lite> Свойства
<b-table-lite> v-model
<b-table-lite> Слоты
<b-table-lite> События

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`bordered`	`Boolean`	`false`	Добавляет границы ко всем ячейкам и заголовкам
`borderless`	`Boolean`	`false`	Удаляет все границы ячеек
`caption`	`String`		Текстовая строка для размещения в элементе заголовка
`caption-html` Использовать с осторожностью	`String`		Строка HTML для размещения в элементе заголовка
`caption-top`	`Boolean`	`false`	Визуально поместите заголовок таблицы над таблицей. Значение по умолчанию ниже
`dark`	`Boolean`	`false`	Переводит таблицу в темный режим
`details-td-class` v2.1.0+	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к элементу td в строке сведений
`fields`	`Array`	`null`	Массив имен полей или массив объектов определения поля
`fixed`	`Boolean`	`false`	Делает все столбцы одинаковой ширины (таблица с фиксированным макетом). Ускорит рендеринг для больших таблиц. Ширину столбцов можно задать с помощью CSS или colgroup
`foot-clone`	`Boolean`	`false`	Включите нижний колонтитул таблицы и клонируйте содержимое заголовка по умолчанию
`foot-row-variant` v2.1.0+	`String`		Примените вариант цвета темы Bootstrap к элементу tr в файле tfoot. Возвращается к head-row-variant
`foot-variant`	`String`		Вариант футера: 'light' или 'dark' или не установлен. Может иметь приоритет над foot-row-variant
`head-row-variant` v2.1.0+	`String`		Примените вариант цвета темы Bootstrap к элементу tr в thead
`head-variant`	`String`		Вариант хедера: 'light' или 'dark' или не установлен. Может иметь приоритет над head-row-variant
`hover`	`Boolean`	`false`	Включает стиль при наведении на строки
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`items`	`Array`	`[]`	Массив элементов для отображения
`no-border-collapse` v2.0.0+	`Boolean`	`false`	Отключить свертывание границ таблицы. Полезно, когда таблица имеет липкие заголовки или столбцы
`outlined`	`Boolean`	`false`	Добавляет границу контура к элементу таблицы
`primary-key`	`String`		Имя поля таблицы, которое содержит гарантированное уникальное значение для каждой строки. Необходим для поддержки перехода tbody, а также ускоряет рендеринг таблицы
`responsive`	`Boolean` или `String`	`false`	Делает таблицу адаптивной по ширине, добавляя горизонтальную полосу прокрутки. Установите значение true, чтобы всегда реагировать, или установите одну из контрольных точек, чтобы переключиться с адаптивного режима на нормальный: 'sm', 'md', 'lg', 'xl'
`small`	`Boolean`	`false`	Визуализирует таблицу с меньшим заполнением ячеек
`stacked`	`Boolean` или `String`	`false`	Поместите таблицу в режим стека. Установите значение true для всегда сложенных или установите одну из контрольных точек для переключения с сложенного на обычный: 'sm', 'md', 'lg', 'xl'
`sticky-header`	`Boolean` или `String`	`false`	Делает заголовок таблицы липким. Установите значение true для максимальной высоты таблицы высотой 300 пикселей или установите любую допустимую высоту CSS (включая единицы измерения)
`striped`	`Boolean`	`false`	Применяет чередование к строкам tbody
`table-class`	`Array` или `Object` или `String`		Класс CSS (или классы) для применения к элементу таблицы
`table-variant`	`String`		Примените вариант цвета темы Bootstrap ко всей таблице
`tbody-class`	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к элементу tbody
`tbody-tr-attr` v2.2.0+	`Object` или `Function`		Атрибуты, добавляемые к каждому tr в tbody, или функция, возвращающая такие атрибуты (Подробнее смотрите документацию)
`tbody-tr-class`	`Array` или `Object` или `String` или `Function`		CSS-класс (или классы) для применения к элементу tr в tbody. Может быть функцией, которая возвращает класс (Подробнее смотрите документацию)
`tbody-transition-handlers`	`Object`		Обработчики событий Vue 'transition-group'. При наличии сделает tbody компонентом Vue 'transition-group'
`tbody-transition-props`	`Object`		Свойства Vue 'transition-group'. При наличии сделает tbody компонентом Vue 'transition-group'
`tfoot-class`	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к элементу tfoot
`tfoot-tr-class`	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к элементу tr в tfoot
`thead-class`	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к элементу thead
`thead-tr-class`	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к элементу tr в thead
`value` v-model	`Array`	`[]`	Текущие отображаемые данные строки. Только для чтения. Не устанавливайте значение для этого свойства

`v-model`

Свойство	Событие
`value`	`input`

Слоты

Наименование (Click to sort ascending)	Область	Описание
`cell()`		Слот с областью действия по умолчанию для пользовательского рендеринга полевых данных
`cell({key})`		Слот с заданной областью для пользовательского рендеринга полевых данных. '{key}' — имя ключа поля
`custom-foot`		Пользовательский слот содержимого нижнего колонтитула для предоставленных пользователем B-TR с B-TH/B-TD. Опционально ограниченный
`foot()`		Слот с областью действия по умолчанию для пользовательского рендеринга поля футера
`foot({key})`		Слот с заданной областью для пользовательского рендеринга нижнего колонтитула поля. '{key}' — имя ключа поля
`head()`		Слот с областью действия по умолчанию для пользовательского рендеринга заголовка поля
`head({key})`		Слот с заданной областью для пользовательского рендеринга заголовка поля. '{key}' — имя ключа поля
`row-details`		Слот с заданной областью для необязательного рендеринга дополнительных сведений о записи. Смотрите документацию для поддержки сведений о строках
`table-caption`	Нет	Содержимое для отображения в элементе заголовка таблицы
`table-colgroup`		Слот для размещения пользовательских элементов colgroup и col. Опционально ограниченный
`thead-top`		Слот над заголовками столбцов в элементе `thead` для user-supplied B-TR с B-TH/B-TD. Опционально ограниченный

События

Событие	Аргументы	Описание
`head-clicked`	`key` - Нажата клавиша столбца (имя поля) `field` - Объект определения поля `event` - Собственный объект события `isFooter` - 'True', если это событие возникло в результате нажатия на ячейку нижнего колонтитула	Генерируется при нажатии на ячейку верхнего или нижнего колонтитула. Не применимо для слота 'custom-foot'
`row-clicked`	`item` - Данные элемента строки, на которую нажали `index` - Индекс строки, на которую нажали `event` - Собственный объект события	Генерируется при нажатии на строку
`row-contextmenu`	`item` - Данные элемента строки, по которой щелкнули правой кнопкой мыши `index` - Индекс строки, по которой щелкнули правой кнопкой мыши `event` - Собственный объект события	Генерируется при щелчке правой кнопкой мыши по строке
`row-dblclicked`	`item` - Данные элемента строки по двойному щелчку `index` - Индекс строки, по которой дважды щелкнули `event` - Собственный объект события	Генерируется при двойном щелчке по строке
`row-hovered`	`item` - Данные элемента строки, на которую наведен курсор `index` - Индекс наводимой строки `event` - Собственный объект события	Генерируется при наведении курсора на строку
`row-middle-clicked`	`item` - Item data of the row being middle clicked `index` - Индекс строки, по которой щелкнули посередине `event` - Собственный объект события	Генерируется, когда строка щелкается средней кнопкой мыши
`row-unhovered`	`item` - Данные элемента строки не отображаются `index` - Индекс строки, которая не зависает `event` - Собственный объект события	Генерируется, когда строка не наведена

`<b-table-simple>`

Смотреть источник

<b-table-simple> Свойства
<b-table-simple> Слоты

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`bordered`	`Boolean`	`false`	Добавляет границы ко всем ячейкам и заголовкам
`borderless`	`Boolean`	`false`	Удаляет все границы ячеек
`caption-top`	`Boolean`	`false`	Визуально поместите заголовок таблицы над таблицей. Значение по умолчанию ниже
`dark`	`Boolean`	`false`	Переводит таблицу в темный режим
`fixed`	`Boolean`	`false`	Делает все столбцы одинаковой ширины (таблица с фиксированным макетом). Ускорит рендеринг для больших таблиц. Ширину столбцов можно задать с помощью CSS или colgroup
`hover`	`Boolean`	`false`	Включает стиль при наведении на строки
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`no-border-collapse` v2.0.0+	`Boolean`	`false`	Отключить свертывание границ таблицы. Полезно, когда таблица имеет липкие заголовки или столбцы
`outlined`	`Boolean`	`false`	Добавляет границу контура к элементу таблицы
`responsive`	`Boolean` или `String`	`false`	Делает таблицу адаптивной по ширине, добавляя горизонтальную полосу прокрутки. Установите значение true, чтобы всегда реагировать, или установите одну из контрольных точек, чтобы переключиться с адаптивного режима на нормальный: 'sm', 'md', 'lg', 'xl'
`small`	`Boolean`	`false`	Визуализирует таблицу с меньшим заполнением ячеек
`stacked`	`Boolean` или `String`	`false`	Поместите таблицу в режим стека. Установите значение true для всегда сложенных или установите одну из контрольных точек для переключения с сложенного на обычный: 'sm', 'md', 'lg', 'xl'
`sticky-header`	`Boolean` или `String`	`false`	Делает заголовок таблицы липким. Установите значение true для максимальной высоты таблицы высотой 300 пикселей или установите любую допустимую высоту CSS (включая единицы измерения)
`striped`	`Boolean`	`false`	Применяет чередование к строкам tbody
`table-class`	`Array` или `Object` или `String`		Класс CSS (или классы) для применения к элементу таблицы
`table-variant`	`String`		Примените вариант цвета темы Bootstrap ко всей таблице

Слоты

Наименование	Описание
`default`	Контент для размещения в table

`<b-tbody>`

Смотреть источник

<b-tbody> Свойства
<b-tbody> Слоты

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство	Тип	По умолчанию	Описание
`tbody-transition-handlers`	`Object`		Обработчики событий Vue 'transition-group'. При наличии сделает tbody компонентом Vue 'transition-group'
`tbody-transition-props`	`Object`		Свойства Vue 'transition-group'. При наличии сделает tbody компонентом Vue 'transition-group'

Слоты

Наименование	Описание
`default`	Контент для размещения в tbody

`<b-thead>`

Смотреть источник

<b-thead> Свойства
<b-thead> Слоты

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство	Тип	По умолчанию	Описание
`head-variant`	`String`		Вариант хедера: 'light' или 'dark', или не установлен

Слоты

Наименование	Описание
`default`	Контент для размещения в thead

`<b-tfoot>`

Смотреть источник

<b-tfoot> Свойства
<b-tfoot> Слоты

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство	Тип	По умолчанию	Описание
`foot-variant`	`String`		Вариант футера: 'light' или 'dark', или не установлен

Слоты

Наименование	Описание
`default`	Контент для размещения в tfoot

`<b-tr>`

Смотреть источник

<b-tr> Свойства
<b-tr> Слоты

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство	Тип	По умолчанию	Описание
`variant`	`String`		Применяет к компоненту один из вариантов цвета темы Bootstrap.

Слоты

Наименование	Описание
`default`	Контент для размещения в tr

`<b-td>`

Смотреть источник

<b-td> Свойства
<b-td> Слоты

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство	Тип	По умолчанию	Описание
`colspan`	`Number` или `String`	`null`	Количество столбцов, которые охватывает эта ячейка
`rowspan`	`Number` или `String`	`null`	Количество строк, которые охватывает эта ячейка
`stacked-heading`	`String`		Направление к ячейке в режиме стека. Применимо только к ячейкам в элементе tbody
`sticky-column`	`Boolean`	`false`	Если это будет приклеенная колонка. Должен быть установлен для всех ячеек в этом столбце. Таблица должна быть с закрепленным заголовком или в адаптивном режиме для работы
`variant`	`String`		Применяет к компоненту один из вариантов цвета темы Bootstrap.

Слоты

Наименование	Описание
`default`	Контент для размещения в td

`<b-th>`

Смотреть источник

<b-th> Свойства

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство	Тип	По умолчанию	Описание
`colspan`	`Number` или `String`	`null`	Количество столбцов, которые охватывает эта ячейка
`rowspan`	`Number` или `String`	`null`	Количество строк, которые охватывает эта ячейка
`stacked-heading`	`String`		Направление к ячейке в режиме стека. Применимо только к ячейкам в элементе tbody
`sticky-column`	`Boolean`	`false`	Если это будет приклеенная колонка. Должен быть установлен для всех ячеек в этом столбце. Таблица должна быть с закрепленным заголовком или в адаптивном режиме для работы
`variant`	`String`		Применяет к компоненту один из вариантов цвета темы Bootstrap.

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент	Именованный экспорт	Путь импорта
`<b-table>`	`BTable`	`bootstrap-vue`
`<b-table-lite>`	`BTableLite`	`bootstrap-vue`
`<b-table-simple>`	`BTableSimple`	`bootstrap-vue`
`<b-tbody>`	`BTbody`	`bootstrap-vue`
`<b-thead>`	`BThead`	`bootstrap-vue`
`<b-tfoot>`	`BTfoot`	`bootstrap-vue`
`<b-tr>`	`BTr`	`bootstrap-vue`
`<b-td>`	`BTd`	`bootstrap-vue`
`<b-th>`	`BTh`	`bootstrap-vue`

Пример:

import { BTable } from 'bootstrap-vue'
Vue.component('b-table', BTable)

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт	Путь импорта
`TablePlugin`	`bootstrap-vue`

Этот плагин также автоматически включает следующие плагины:

TableLitePlugin
TableSimplePlugin

Пример:

import { TablePlugin } from 'bootstrap-vue'
Vue.use(TablePlugin)

Справочник по компонентам

Свойства

v-model

Слоты

События

$root слушатели событий

Свойства

v-model

Слоты

События

Свойства

Слоты

Свойства

Слоты

Свойства

Слоты

Свойства

Слоты

Свойства

Слоты

Свойства

Слоты

Свойства

Импорт отдельных компонентов

Импортировать как плагин Vue.js

`v-model`

`$root` слушатели событий

`v-model`