Таблица

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

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

<template>
  <div>
    <b-table striped hover :items="items"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

<!-- b-table.vue -->

Пункты (данные для записи)

items - это данные таблицы в формате массива, где каждая запись (строка) данных является объектами с ключами. Пример формата:

const items = [
  { age: 32, first_name: 'Cyndi' },
  { age: 27, first_name: 'Havij' },
  { age: 42, first_name: 'Robert' }
]

<b-table> автоматически выбирает первую строку для извлечения имен полей (ключей в данных записи). Имена полей автоматически "очеловечиваются" путем преобразования kebab-case, snake_case и camelCase в отдельные слова с заглавными буквами в каждом слове. Примеры преобразований:

  • first_name становится First Name
  • last-name становится Last Name
  • age становится Age
  • YEAR остается YEAR
  • isActive становится Is Active

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

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

Данные записи также могут иметь дополнительные специальные зарезервированные ключи имен для раскрашивания строк и отдельных ячеек (вариантов), а также для запуска дополнительных сведений о строке. Поддерживаемые необязательные свойства модификатора записи элемента (убедитесь, что ваши ключи полей не конфликтуют с этими именами):

Свойство Тип Описание
_cellVariants Object Контекстное состояние начальной загрузки применяется к отдельным ячейкам. Вводится по полю (поддерживаемые значения см. в разделе Варианты цвета). Эти варианты сопоставляются с классами table-${variant} или bg-${variant} (когда установлено свойство dark).
_rowVariant String Контекстное состояние начальной загрузки применяется ко всей строке (поддерживаемые значения см. в разделе Варианты цвета). Эти варианты сопоставляются с классами table-${variant} или bg-${variant} (когда установлено свойство dark)
_showDetails Boolean Используется для запуска отображения слота с областью видимости row-details. Дополнительную информацию смотрите в разделе Поддержка сведений о строках ниже

Пример: Использование вариантов для ячеек таблицы

<template>
  <div>
    <b-table hover :items="items"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          {
            age: 89,
            first_name: 'Geneva',
            last_name: 'Wilson',
            _rowVariant: 'danger'
          },
          {
            age: 40,
            first_name: 'Thor',
            last_name: 'MacDonald',
            _cellVariants: { age: 'info', first_name: 'warning' }
          },
          { age: 29, first_name: 'Dick', last_name: 'Dunlap' }
        ]
      }
    }
  }
</script>

<!-- b-table-variants.vue -->

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

  • Возвращая null (или undefined) и вызывая обратный вызов, когда данные готовы, с массивом данных в качестве единственного аргумента для обратного вызова,
  • Возвращая Promise, который разрешается в массив.

Дополнительные сведения смотрите в разделе "Использование функций поставщика элементов" ниже.

Примечания и предупреждения к элементам таблицы

  • Избегайте манипулирования данными записи на месте, так как изменения данных базовых элементов вызовут повторную визуализацию строки или всей таблицы. Смотрите Первичный ключ, ниже, чтобы узнать, как свести к минимуму повторную визуализацию строк Vue.
  • Записи массива items должны быть простыми объектами и должны избегать размещения данных, которые могут иметь циклические ссылки в значениях внутри строки. <b-table> сериализует данные строки в строки для сортировки и фильтрации, а циклические ссылки вызовут переполнение стека и сбой вашего приложения!

Поля (определения столбцов)

Свойство fields используется для настройки заголовков столбцов таблицы и порядка отображения столбцов данных. Ключи объекта поля (например, age или first_name, как показано ниже) используются для извлечения значения из каждой строки элемента (записи) и для предоставления дополнительных функций, таких как включение сортировки в столбце, и т.п.

Поля могут быть предоставлены как простой массив или массив объектов. Внутренне данные полей будут нормализованы в формат массива объектов. События или слоты, которые включают данные столбца field, будут иметь формат нормализованного объекта поля (массив объектов для fields или объект для отдельного field).

Поля как простой массив

Поля могут быть простым массивом для определения порядка столбцов и того, какие столбцы отображать:

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

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // Note `isActive` is left out and will not appear in the rendered table
        fields: ['first_name', 'last_name', 'age'],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

<!-- b-table-fields-array.vue -->

Поля как массив объектов

Поля могут быть массивом объектов, обеспечивая дополнительный контроль над полями (например, сортировку, форматирование и т. д.). Будут показаны только столбцы (ключи), которые появляются в массиве полей:

Пример: Использование определения полей массива объектов

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // Note 'isActive' is left out and will not appear in the rendered table
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Person age',
            sortable: true,
            // Variant applies to the whole column, including the header and footer
            variant: 'danger'
          }
        ],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

<!-- b-table-fields-array-of-objects.vue -->

Ссылка на определение поля

Распознаются следующие свойства поля:

Свойство Тип Описание
key String Ключ для выбора данных из записи в массиве items. Требуется при установке fields через массив объектов key также используется для генерации имен слотов настраиваемый рендеринг данных и настраиваемый верхний и нижний колонтитулы.
label String Появляется в заголовке таблицы столбцов (и нижнем колонтитуле, если установлен foot-clone). По умолчанию используется ключ поля (в гуманизированном формате), если он не указан. Можно использовать пустые метки, назначив пустую строку "", но убедитесь, что вы также установили headerTitle, чтобы предоставить незрячим пользователям подсказку о содержимом столбца.
headerTitle String Текст для размещения в заголовке полей <th> атрибута title. По умолчанию нет атрибута title.
headerAbbr String Текст для размещения в заголовке полей <th> атрибута abbr. Установите это на несокращенную версию метки (или названия), если метка (или название) является аббревиатурой. По умолчанию нет атрибута abbr.
class String или Array Имя класса (или массив имен классов) для добавления к <th> и <td> в столбце.
formatter String или Function Функция обратного вызова средства форматирования или имя метода в вашем компоненте может использоваться вместо (или в сочетании с) слотов полей с областью действия. Средство форматирования будет вызываться с синтаксисом formatter(value, key, item). Смотрите Пользовательский рендеринг данных для получения более подробной информации.
sortable Boolean Включите сортировку по этому столбцу. Подробнее смотрите в разделе Сортировка.
sortKey String v2.17.0+ Установите значение sortBy для столбца в испускаемом контексте, когда для параметра no-local-sorting установлено значение true.
sortDirection String Установите начальное направление сортировки в этом столбце, когда он будет отсортирован. Дополнительные сведения смотрите в разделе Изменить направление начальной сортировки.
sortByFormatted Boolean или Function Сортировать столбец по результату функции обратного вызова formatter поля, если установлено значение true. По умолчанию false. Булево значение не действует, если поле не имеет форматирования. Опционально принимает функцию форматирования reference для форматирования значения только в целях сортировки. Подробнее смотрите в разделе Сортировка.
filterByFormatted Boolean или Function Отфильтровать столбец по результату функции обратного вызова поля formatter, если установлено значение true. По умолчанию false. Булево значение не действует, если поле не имеет форматирования. Опционально принимает функцию форматирования reference для форматирования значения только в целях фильтрации. Дополнительные сведения смотрите в разделе Фильтрация.
tdClass Строка или массив или функция Имя класса (или массив имен классов) для добавления к ячейкам <tbody> данных <td> в столбце. Если требуются пользовательские классы для каждой ячейки, вместо этого можно указать функцию обратного вызова. Функция будет вызываться как tdClass(value, key, item) и должна возвращать Array или String.
thClass String или Array Имя класса (или массив имен классов) для добавления в ячейку <th> заголовка <thead>/<tfoot> этого поля.
thStyle Object Объект JavaScript, представляющий стили CSS, которые вы хотели бы применить к таблице <thead>/<tfoot>, поле <th>.
variant String Примените контекстный класс ко всем <th> и <td> в столбце - active, success, info, warning, danger. Эти варианты сопоставляются с классами thead-${variant} (в заголовке), table-${variant} (в теле) или bg-${variant} (когда задано свойство dark).
tdAttr Object или Function Объект JavaScript, представляющий дополнительные атрибуты для применения к ячейке <td> поля <tbody>. Если требуются настраиваемые атрибуты для каждой ячейки, вместо этого можно указать функцию обратного вызова. Функция будет вызываться как tdAttr(value, key, item) и должна возвращать Object.
thAttr Object или Function Объект JavaScript, представляющий дополнительные атрибуты для применения к ячейке <th> заголовка <thead>/<tfoot>. Если для поля isRowHeader установлено значение true, атрибуты также будут применяться к ячейке <th> поля <tbody>. Если требуются настраиваемые атрибуты для каждой ячейки, вместо этого можно указать функцию обратного вызова. Функция будет вызываться как thAttr(value, key, item, type) и должна возвращать Object.
isRowHeader Boolean Если установлено значение true, ячейка данных элемента поля будет отображаться с <th>, а не со значением по умолчанию <td>.
stickyColumn Boolean Если установлено значение true и таблица находится в отзывчивом режиме или имеет липкие заголовки, столбец будет зафиксирован влево, когда горизонтальная полоса прокрутки таблицы прокручивается. Дополнительные сведения смотрите в разделе Прикрепленные столбцы

Примечания:

  • Свойства поля, если они отсутствуют, по умолчанию имеют значение null (falsey) если выше не указано иное.
  • class, thClass, tdClass и т. д. не будут работать с классами, которые определены в CSS с ограниченной областью действия, если только вы не используете VueLoader Deep selector.
  • Для получения информации о синтаксисе, поддерживаемом thStyle, смотрите Привязки классов и стилей в документации Vue. руководство по js.
  • Любые дополнительные свойства, добавленные к объектам определения поля, останутся нетронутыми, поэтому вы можете получить к ним доступ через именованные слоты области для пользовательских данных, рендеринга верхнего и нижнего колонтитула.

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

Не стесняйтесь смешивать и сопоставлять простой массив и массив объектов вместе:

const fields = [
  { key: 'first_name', label: 'First' },
  { key: 'last_name', label: 'Last' },
  'age',
  'sex'
]

Первичный ключ

<b-table> предоставляет дополнительную поддержку свойства primary-key, которую вы можете использовать для определения ключа поля название , который уникально идентифицирует строку.

Значение, указанное ключом основного столбца, должно быть либо string, либо number, и должно быть уникальным во всех строках таблицы.

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

Генерация идентификатора строки таблицы

Если указан primary-key, он будет генерировать уникальный идентификатор для каждого элемента строки элемента <tr>. Идентификатор будет иметь формат {table-id}__row_{primary-key-value}, где {table-id} – это уникальный идентификатор <b-table>, а {primary-key-value} — это значение поля элемента для поля, заданного первичным ключом primary-key.

Рендеринг таблицы и оптимизация переходов

primary-key также используется <b-table>, чтобы помочь Vue оптимизировать отрисовку строк таблицы. Внутри значение ключа поля, указанное свойство primary-key, используется в качестве значения Vue :key для каждого элемента строки <tr> визуализируемого элемента.

Если вы видите проблему рендеринга (т. е. скрытие всплывающих подсказок или неожиданное повторное использование подкомпонентов при изменении данных элемента или сортировке/фильтрации/редактировании данных) или переходы строк таблицы не работают, установите свойство primary-key (если у вас есть уникальный идентификатор для каждой строки) может решить эти проблемы.

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

Если primary-key не указан, <b-table> будет автоматически генерировать ключи на основе порядкового номера отображаемой строки (т. е. позиции в отображенных строках таблицы). Это может вызвать проблемы с графическим интерфейсом, такие как подкомпоненты/элементы, которые рендерятся с предыдущими результатами (т. е. повторно используются процедурами оптимизации патчей рендеринга Vue). Указание столбца primary-key может облегчить эту проблему (или вы можете поместить уникальный :key в свой элемент/компоненты в слотах настраиваемых полей).

Дополнительную информацию смотрите в разделе Поддержка перехода тела таблицы.

Параметры стиля таблицы

Стиль таблицы

<b-table> предоставляет несколько свойств для изменения стиля таблицы:

Свойство Тип Описание
striped Boolean Добавьте полосу зебры к строкам таблицы в <tbody>
bordered Boolean Для границ со всех сторон таблицы и ячеек.
borderless Boolean Удаляет внутренние границы из таблицы.
outlined Boolean Для тонкой каймы со всех сторон таблицы. Не действует, если установлено значение bordered.
small Boolean Чтобы сделать таблицы более компактными, уменьшите отступы ячеек вдвое.
hover Boolean Чтобы включить подсветку при наведении на строки таблицы в <tbody>
dark Boolean Инвертировать цвета — со светлым текстом на темном фоне (эквивалентно классу Bootstrap v4 .table-dark)
fixed Boolean Создайте таблицу с одинаковыми столбцами фиксированной ширины (table-layout: fixed;)
responsive Boolean или String Создайте адаптивную таблицу, чтобы она прокручивалась горизонтально. Установите значение true для всегда реагирующей таблицы или установите одну из контрольных точек 'sm', 'md', 'lg' или 'xl', чтобы сделать таблицу реагирующей (горизонтальная прокрутка) только на экранах меньше контрольной точки. Подробнее смотрите Адаптивные таблицы ниже
sticky-header Boolean или String Создает вертикально прокручиваемую таблицу с липкими заголовками. Установите значение true, чтобы включить липкие заголовки (максимальная высота таблицы по умолчанию 300px), или установите его в строку, содержащую высоту (с единицами CSS), чтобы указать максимальную высоту, отличную от 300px. Смотрите подробности в разделе Прилепленный заголовок ниже.
stacked Boolean или String Создайте адаптивную таблицу с накоплением. Установите значение true для всегда сложенной таблицы или установите одну из контрольных точек 'sm', 'md', 'lg' или 'xl' , чтобы сделать таблицу визуально только сложенной. на экранах меньше контрольной точки. Подробности смотрите в разделе Сложенные таблицы ниже.
caption-top Boolean Если у таблицы есть заголовок, и для этого свойства установлено значение true, заголовок будет визуально размещен над таблицей. Если false (по умолчанию), подпись будет визуально размещена под таблицей.
table-variant String Дайте таблице общий цветовой вариант темы.
head-variant String Используйте 'light' или `'dark', чтобы сделать заголовок таблицы светло- или темно-серым соответственно.
foot-variant String Используйте 'light' или 'dark' , чтобы сделать нижний колонтитул таблицы светло- или темно-серым соответственно. Если не установлено, будет использоваться head-variant. Не действует, если foot-clone не установлен.
foot-clone Boolean Включает нижний колонтитул таблицы и по умолчанию имеет то же содержимое, что и заголовок таблицы.
no-footer-sorting Boolean Когда foot-clone имеет значение true и таблица сортируется, отключает иконки сортировки и поведение кликов в ячейках заголовков нижнего колонтитула. Подробнее смотрите в разделе Сортировка ниже.
no-border-collapse Boolean Отключает сворачивание границ таблицы по умолчанию. В основном для использования с закрепленными заголовками и/или закрепленными столбцами. В некоторых ситуациях вызывает появление двойных границ.

Примечание: Параметры стиля таблицы fixed, stacked, caption-top, no-border-collapse и функция сортировки таблицы — все они требуют пользовательского CSS BootstrapVue.

Пример: Основные стили таблиц

<template>
  <div>
    <b-form-group label="Table Options" label-cols-lg="2" v-slot="{ ariaDescribedby }">
      <b-form-checkbox v-model="striped" :aria-describedby="ariaDescribedby" inline>Striped</b-form-checkbox>
      <b-form-checkbox v-model="bordered" :aria-describedby="ariaDescribedby" inline>Bordered</b-form-checkbox>
      <b-form-checkbox v-model="borderless" :aria-describedby="ariaDescribedby" inline>Borderless</b-form-checkbox>
      <b-form-checkbox v-model="outlined" :aria-describedby="ariaDescribedby" inline>Outlined</b-form-checkbox>
      <b-form-checkbox v-model="small" :aria-describedby="ariaDescribedby" inline>Маленькая</b-form-checkbox>
      <b-form-checkbox v-model="hover" :aria-describedby="ariaDescribedby" inline>Hover</b-form-checkbox>
      <b-form-checkbox v-model="dark" :aria-describedby="ariaDescribedby" inline>Dark</b-form-checkbox>
      <b-form-checkbox v-model="fixed" :aria-describedby="ariaDescribedby" inline>Fixed</b-form-checkbox>
      <b-form-checkbox v-model="footClone" :aria-describedby="ariaDescribedby" inline>Foot Clone</b-form-checkbox>
      <b-form-checkbox v-model="noCollapse" :aria-describedby="ariaDescribedby" inline>No border collapse</b-form-checkbox>
    </b-form-group>

    <b-form-group label="Head Variant" label-cols-lg="2" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="headVariant"
        :aria-describedby="ariaDescribedby"
        class="mt-lg-2"
      >
        <b-form-radio :value="null" inline>None</b-form-radio>
        <b-form-radio value="light" inline>Light</b-form-radio>
        <b-form-radio value="dark" inline>Dark</b-form-radio>
      </b-form-radio-group>
    </b-form-group>

    <b-form-group label="Table Variant" label-for="table-style-variant" label-cols-lg="2">
      <b-form-select
        id="table-style-variant"
        v-model="tableVariant"
        :options="tableVariants"
      >
        <template #first>
          <option value="">-- None --</option>
        </template>
      </b-form-select>
    </b-form-group>

    <b-table
      :striped="striped"
      :bordered="bordered"
      :borderless="borderless"
      :outlined="outlined"
      :small="small"
      :hover="hover"
      :dark="dark"
      :fixed="fixed"
      :foot-clone="footClone"
      :no-border-collapse="noCollapse"
      :items="items"
      :fields="fields"
      :head-variant="headVariant"
      :table-variant="tableVariant"
    ></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fields: ['first_name', 'last_name', 'age'],
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' }
        ],
        tableVariants: [
          'primary',
          'secondary',
          'info',
          'danger',
          'warning',
          'success',
          'light',
          'dark'
        ],
        striped: false,
        bordered: false,
        borderless: false,
        outlined: false,
        small: false,
        hover: false,
        dark: false,
        fixed: false,
        footClone: false,
        headVariant: null,
        tableVariant: '',
        noCollapse: false
      }
    }
  }
</script>

<!-- b-table-bordered.vue -->

Стили и атрибуты строк

Вы также можете стилизовать каждую строку, используя свойство tbody-tr-class, и при необходимости указать дополнительные атрибуты с помощью свойства tbody-tr-attr:

Свойство Тип Описание
tbody-tr-class String, Array или Function Классы, применяемые к каждой строке таблицы. Если задана функция, она будет вызываться как tbodyTrClass( item, type ) и может возвращать Array, Object или String.
tbody-tr-attr Object или Function Атрибуты, применяемые к каждой строке таблицы. Если задана функция, она будет вызываться как tbodyTrAttr( item, type ) и должна возвращать Object.

При передаче ссылки на функцию в tbody-tr-class или tbody-tr-attr аргументы функции будут следующими:

  • item - Данные записи элемента, связанные со строкой. Для строк, которые не связаны с записью элемента, это значение будет null или undefined
  • type - Тип отображаемой строки. 'row' для строки элемента, 'row-details' для строки сведений об элементе, 'row-top' для фиксированного верхнего слота строки, 'row-bottom' для фиксированного нижнего слота строки , или 'table-busy' для занятого слота таблицы.

Пример: Основные стили строк

<template>
  <div>
    <b-table :items="items" :fields="fields" :tbody-tr-class="rowClass"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fields: ['first_name', 'last_name', 'age'],
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald', status: 'awesome' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' }
        ]
      }
    },
    methods: {
      rowClass(item, type) {
        if (!item || type !== 'row') return
        if (item.status === 'awesome') return 'table-success'
      }
    }
  }
</script>

<!-- b-table-styled-row.vue -->

Адаптивные таблицы

Адаптивные таблицы позволяют с легкостью прокручивать таблицы по горизонтали. Сделайте любую таблицу отзывчивой во всех окнах просмотра, установив для свойства responsive значение true. Или выберите максимальную контрольную точку, до которой должна быть настроена отзывчивая таблица, установив свойство responsive на одно из значений контрольной точки: sm, md, lg или xl.

Пример: Всегда отзывчивая таблица

<template>
  <div>
    <b-table responsive :items="items"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          {
            heading1: 'table cell',
            heading2: 'table cell',
            heading3: 'table cell',
            heading4: 'table cell',
            heading5: 'table cell',
            heading6: 'table cell',
            heading7: 'table cell',
            heading8: 'table cell',
            heading9: 'table cell',
            heading10: 'table cell',
            heading11: 'table cell',
            heading12: 'table cell'
          },
          {
            heading1: 'table cell',
            heading2: 'table cell',
            heading3: 'table cell',
            heading4: 'table cell',
            heading5: 'table cell',
            heading6: 'table cell',
            heading7: 'table cell',
            heading8: 'table cell',
            heading9: 'table cell',
            heading10: 'table cell',
            heading11: 'table cell',
            heading12: 'table cell'
          },
          {
            heading1: 'table cell',
            heading2: 'table cell',
            heading3: 'table cell',
            heading4: 'table cell',
            heading5: 'table cell',
            heading6: 'table cell',
            heading7: 'table cell',
            heading8: 'table cell',
            heading9: 'table cell',
            heading10: 'table cell',
            heading11: 'table cell',
            heading12: 'table cell'
          }
        ]
      }
    }
  }
</script>

<!-- b-table-responsive.vue -->

Примечания к отзывчивой таблице:

  • Возможная вертикальная обрезка/усечение. Адаптивные таблицы используют overflow-y: hidden, который отсекает любой контент, выходящий за нижний или верхний края таблицы. В частности, это может обрезать выпадающие меню и другие сторонние виджеты.
  • Использование свойство responsive и fixed вместе не будет работать должным образом. Фиксированный макет таблицы использует первую строку (в данном случае заголовок таблицы) для вычисления ширины, требуемой для каждого столбца (и общей ширины таблицы), чтобы соответствовать ширине родительского контейнера — без учета ячеек в <tbody> — в результате таблица может не реагировать. Чтобы обойти это ограничение, вам нужно указать ширину столбцов (или определенных столбцов) одним из следующих способов:
    • Используйте элементы <col> в слоте table-colgroup для которых задана ширина (например, <col style="width: 20rem">), или
    • Оборачивать ячейки заголовка в элементы <div> с помощью настраиваемого рендеринга заголовка, для которых установлена ​​минимальная ширина, или
    • Используйте свойство thStyle объекта определения поля, чтобы установить ширину для столбца (столбцов), или
    • Используйте пользовательский CSS для определения классов, которые будут применяться к столбцам для установки ширины, через свойства объекта thClass или class объекта определения поля.

Сложенные таблицы

В качестве альтернативы адаптивным таблицам BootstrapVue включает параметр таблицы с накоплением (с использованием пользовательских SCSS/CSS), который позволяет отображать таблицы в визуальном формате с накоплением. Сделайте любую таблицу сложенной во всех окнах просмотра, установив свойство stacked на true. Или, в качестве альтернативы, установите контрольную точку, при которой таблица вернется к обычному формату таблицы, установив для свойства stacked одно из значений контрольной точки 'sm', 'md', 'lg' или 'xl'.

Метки заголовков столбцов будут отображаться слева от значения каждого поля с использованием псевдоэлемента CSS ::before с шириной 40%.

Свойство stacked имеет приоритет над свойством sticky-header и свойством определения поля stickyColumn.

Пример: всегда сложенная таблица

<template>
  <div>
    <b-table stacked :items="items"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' }
        ]
      }
    }
  }
</script>

<!-- b-table-stacked.vue -->

Примечание. Когда таблица визуально сложена:

  • Заголовок таблицы (и нижний колонтитул таблицы) будут скрыты.
  • Пользовательские отображаемые слоты заголовков не будут отображаться, вместо этого будет использоваться поле label.
  • Таблица нельзя сортировать, нажимая отображаемые метки полей. Вам нужно будет предоставить внешний элемент управления, чтобы выбрать поле для сортировки и направление сортировки. См. раздел Сортировка ниже для информации об управлении сортировкой, а также полный пример внизу этой страницы для примера управления сортировкой с помощью элементов управления формы.
  • Слоты top-row и bottom-row будут скрыты при визуальном размещении.
  • Заголовок таблицы, если он указан, всегда будет отображаться в верхней части таблицы при визуальном размещении.
  • В всегда сложенной таблице верхний и нижний колонтитулы таблицы, а также фиксированные верхние и нижние слоты строк не будут отображаться.

Пользовательский CSS BootstrapVue требуется для поддержки сложенных таблиц.

Заголовок таблицы

Добавьте необязательную подпись к вашей таблице с помощью свойства caption или именованного слота table-caption (слот имеет приоритет над свойством). Стиль Bootstrap v4 по умолчанию размещает заголовок в нижней части таблицы:

<template>
  <div>
    <b-table :items="items" :fields="fields">
      <template #table-caption>This is a table caption.</template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fields: ['first_name', 'last_name', 'age'],
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' }
        ]
      }
    }
  }
</script>

<!-- b-table-caption.vue -->

Вы можете разместить заголовок в верхней части таблицы, установив свойство caption-top в значение true:

<template>
  <div>
    <b-table :items="items" :fields="fields" caption-top>
      <template #table-caption>This is a table caption at the top.</template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fields: ['first_name', 'last_name', 'age'],
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' }
        ]
      }
    }
  }
</script>

<!-- b-table-caption-top.vue -->

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

colgroup таблицы

Используйте именованный слот table-colgroup, чтобы указать элементы <colgroup> и <col> для дополнительной группировки и стиля столбцов таблицы. Обратите внимание, что стили, доступные через элементы <col>, ограничены. Обратитесь к MDN для получения подробной информации и использования <colgroup>

Слот table-colgroup может иметь опциональную область действия, получая объект со следующими свойствами:

Свойство Тип Описание
columns Number Количество столбцов в отображаемой таблице
fields Array Массив объектов определения поля (нормированный к формату массив объектов)

Если указано, содержимое слота table-colgroup будет помещено внутри элемента <colgroup>. Нет необходимости предоставлять собственный внешний элемент <colgroup>. Когда ряд столбцов таблицы должен быть сгруппирован по вспомогательным технологическим причинам (для передачи логических ассоциаций столбцов используйте элемент <col span="#"> (с заменой # на количество сгруппированных столбцов), чтобы сгруппировать ряд столбцов..

Совет: В некоторых ситуациях при попытке установить ширину столбцов с помощью style или class в элементе <col> вы можете обнаружить, что размещение таблицы в fixed ширине заголовка (режим фиксированной разметки таблицы ) в сочетании с responsive (горизонтальная прокрутка) режимом поможет, хотя вам нужно будет указать явную ширину или минимальную ширину через стиль или класс для соответствующего элемента <col> каждого столбца. Например:

<b-table fixed responsive :items="items" :fields="fields" ... >
  <template #table-colgroup="scope">
    <col
      v-for="field in scope.fields"
      :key="field.key"
      :style="{ width: field.key === 'foo' ? '120px' : '180px' }"
    >
  </template>
  <!-- additional table slots here if needed -->
</b-table>

Состояние занятости таблицы

<b-table> предоставляет свойство busy, который будет помечать таблицу как занятая, для которого вы можете установить значение true непосредственно перед обновлением своих элементов, а затем установить для него значение false, как только вы получите свои элементы. В состоянии занятости таблица будет иметь атрибут aria-busy="true".

В состоянии занятости таблица будет отображаться в «приглушенном» виде (opacity: 0.6) с использованием следующего пользовательского CSS:

/* Busy table styling */
table.b-table[aria-busy='true'] {
  opacity: 0.6;
}

Вы можете переопределить этот стиль, используя свой собственный CSS.

Вы можете дополнительно указать слот table-busy для отображения пользовательского сообщения о загрузке или счетчика всякий раз, когда состояние занятости таблицы равно true. Слот будет помещен в элемент <tr> с классом b-table-busy-slot, который имеет один единственный элемент <td> с colspan, равным количеству полей.

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

<template>
  <div>
    <b-button @click="toggleBusy">Toggle Busy State</b-button>

    <b-table :items="items" :busy="isBusy" class="mt-3" outlined>
      <template #table-busy>
        <div class="text-center text-danger my-2">
          <b-spinner class="align-middle"></b-spinner>
          <strong>Loading...</strong>
        </div>
      </template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isBusy: false,
        items: [
          { first_name: 'Dickerson', last_name: 'MacDonald', age: 40 },
          { first_name: 'Larsen', last_name: 'Shaw', age: 21 },
          { first_name: 'Geneva', last_name: 'Wilson', age: 89 },
          { first_name: 'Jami', last_name: 'Carney', age: 38 }
        ]
      }
    },
    methods: {
      toggleBusy() {
        this.isBusy = !this.isBusy
      }
    }
  }
</script>

<!-- b-table-busy-slot.vue -->

Также смотрите Использование функций поставщика предметов ниже для получения дополнительной информации о состоянии busy.

Примечания:

  • Все события, связанные с кликами и наведением курсора, а также события изменения сортировки не генерируются, когда таблица находится в состоянии busy.
  • Занятый стиль и слот недоступны в компоненте <b-table-lite>.

Пользовательский рендеринг данных

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

Слоты поля с заданной областью действия

Слоты полей с заданной областью дают вам больший контроль над тем, как отображаются данные записи. Вы можете использовать слоты с ограниченной областью действия, чтобы предоставить настраиваемый рендеринг для определенного поля. Если вы хотите добавить дополнительное поле, которого нет в записях, просто добавьте его в массив fields, а затем укажите ссылку на поле(я) в слоте(ах) области видимости. ). Слоты полей с ограниченной областью действия используют следующий синтаксис именования: 'cell(' + field key + ')'.

Вы можете использовать слот fall-back по умолчанию 'cell()' для форматирования любых ячеек, которые не имеют явного предоставленного слота с областью видимости.

Пример: Визуализация пользовательских данных с использованием слотов с заданной областью

<template>
  <div>
    <b-table small :fields="fields" :items="items" responsive="sm">
      <!-- A virtual column -->
      <template #cell(index)="data">
        {{ data.index + 1 }}
      </template>

      <!-- A custom formatted column -->
      <template #cell(name)="data">
        <b class="text-info">{{ data.value.last.toUpperCase() }}</b>, <b>{{ data.value.first }}</b>
      </template>

      <!-- A virtual composite column -->
      <template #cell(nameage)="data">
        {{ data.item.name.first }} is {{ data.item.age }} years old
      </template>

      <!-- Optional default data cell scoped slot -->
      <template #cell()="data">
        <i>{{ data.value }}</i>
      </template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fields: [
          // A virtual column that doesn't exist in items
          'index',
          // A column that needs custom formatting
          { key: 'name', label: 'Full Name' },
          // A regular column
          'age',
          // A regular column
          'sex',
          // A virtual column made up from two fields
          { key: 'nameage', label: 'First name and age' }
        ],
        items: [
          { name: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
          { name: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
          { name: { first: 'Rubin', last: 'Kincade' }, sex: 'Male', age: 73 },
          { name: { first: 'Shirley', last: 'Partridge' }, sex: 'Female', age: 62 }
        ]
      }
    }
  }
</script>

<!-- b-table-data-slots.vue -->

Переменная области действия слота (data в приведенном выше примере) будет иметь следующие свойства:

Свойство Тип Описание
index Number Номер строки (индексируется с нуля) относительно отображаемых строк
item Object Все необработанные данные записи (т. е. items[index]) для этой строки (до применения форматирования)
value Any Значение для этого ключа в записи (null или undefined, если столбец виртуальный), или вывод функции formatter
unformatted Any Необработанное значение для этого ключа в записи элемента (null или undefined, если это виртуальный столбец) перед передачей в функции formatter
field Object Объект определения нормализованного поля поля
detailsShowing Boolean Будет true, если область видимости строки row-details видима. Дополнительную информацию см. в разделе Поддержка сведений о строках ниже
toggleDetails Function Может вызываться для переключения видимости слота строки с областью действия row-details. Дополнительную информацию смотрите в разделе Поддержка сведений о строках ниже
rowSelected Boolean Будет true, если строка была выбрана. Дополнительную информацию см. в разделе Поддержка выбора строки
selectRow Function При вызове выбирает текущую строку. Дополнительную информацию см. в разделе Поддержка выбора строки
unselectRow Function При вызове отменяет выбор текущей строки. Дополнительную информацию см. в разделе Поддержка выбора строки

Примечания:

  • index не всегда будет фактическим номером индекса строки, так как он вычисляется после применения фильтрации, сортировки и разбиения на страницы к исходным данным таблицы. Значение index будет относиться к отображаемому номеру строки. Это число будет соответствовать индексам из дополнительной переменной v-model bound variable.
  • При использовании нового синтаксиса Vue 2.6 v-slot, обратите внимание, что имена слотов не могут содержать пробелы, а при использовании шаблонов DOM в браузере имена слотов всегда будут в нижнем регистре. Чтобы обойти это, вы можете передать имя слота, используя динамические имена слотов Vue

Отображение необработанного HTML

По умолчанию b-table экранирует теги HTML в данных элементов и результатах функций форматирования, если вам нужно отобразить необработанный HTML-код в b-table, вы должны использовать директиву v-html для элемента в области видимости поля слота.

<template>
  <div>
    <b-table :items="items">
      <template #cell(html)="data">
        <span v-html="data.value"></span>
      </template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          {
            text: 'This is <i>escaped</i> content',
            html: 'This is <i>raw <strong>HTML</strong></i> <span style="color:red">content</span>'
          }
        ]
      }
    }
  }
</script>

<!-- b-table-html-data-slots.vue -->

Внимание: Будьте осторожны при использовании метода v-html для отображения содержимого, предоставленного пользователем, так как это может сделать ваше приложение уязвимым для XSS attacks, если вы сначала не очистите предоставленную пользователем строку.

Обратный вызов форматера

При желании вы можете настроить вывод поля с помощью функции обратного вызова форматирования. Для этого используется свойство поля formatter. Значением этого свойства может быть строка или ссылка на функцию. В случае строкового значения функция должна быть определена в методах родительского компонента. При предоставлении formatter в качестве Function, он должен быть объявлен в глобальном масштабе (окно или как глобальный миксин в Vue, или как анонимная функция), если только он не был привязан к контексту this.

Функция обратного вызова принимает три аргумента — value, key и item и должна возвращать отформатированное значение в виде строки (строки HTML не поддерживаются).

Пример: Пользовательский рендеринг данных с функцией обратного вызова форматирования

<template>
  <div>
    <b-table :fields="fields" :items="items">
      <template #cell(name)="data">
        <!-- `data.value` is the value after formatted by the Formatter -->
        <a :href="`#${data.value.replace(/[^a-z]+/i,'-').toLowerCase()}`">{{ data.value }}</a>
      </template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fields: [
          {
            // A column that needs custom formatting,
            // calling formatter 'fullName' in this app
            key: 'name',
            label: 'Full Name',
            formatter: 'fullName'
          },
          // A regular column
          'age',
          {
            // A regular column with custom formatter
            key: 'sex',
            formatter: value => {
              return value.charAt(0).toUpperCase()
            }
          },
          {
            // A virtual column with custom formatter
            key: 'birthYear',
            label: 'Calculated Birth Year',
            formatter: (value, key, item) => {
              return new Date().getFullYear() - item.age
            }
          }
        ],
        items: [
          { name: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
          { name: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
          { name: { first: 'Rubin', last: 'Kincade' }, sex: 'male', age: 73 },
          { name: { first: 'Shirley', last: 'Partridge' }, sex: 'female', age: 62 }
        ]
      }
    },
    methods: {
      fullName(value) {
        return `${value.first} ${value.last}`
      }
    }
  }
</script>

<!-- b-table-data-formatter.vue -->

Пользовательский рендеринг верхнего и нижнего колонтитула через слоты с заданной областью

Также можно обеспечить пользовательский рендеринг для элементов таблиц thead и tfoot. Обратите внимание, что по умолчанию нижний колонтитул таблицы не отображается, если для foot-clone не установлено значение true.

Слоты с заданной областью для ячеек верхнего и нижнего колонтитула используют специальное соглашение об именах 'head(<fieldkey>)' и 'foot(<fieldkey>)' соответственно. Если слот 'foot(...)' для поля не указан, но есть слот 'head(...)', то нижний колонтитул будет использовать содержимое слота 'head(...)'.

Вы можете использовать слот по умолчанию fall-back с областью действия 'head()' или 'foot()' для форматирования любых ячеек верхнего или нижнего колонтитула, которые не имеют явного предоставленного слота с областью действия.

<template>
  <div>
    <b-table :fields="fields" :items="items" foot-clone>
      <!-- A custom formatted data column cell -->
      <template #cell(name)="data">
        {{ data.value.first }} {{ data.value.last }}
      </template>

      <!-- A custom formatted header cell for field 'name' -->
      <template #head(name)="data">
        <span class="text-info">{{ data.label.toUpperCase() }}</span>
      </template>

      <!-- A custom formatted footer cell for field 'name' -->
      <template #foot(name)="data">
        <span class="text-danger">{{ data.label }}</span>
      </template>

      <!-- Default fall-back custom formatted footer cell -->
      <template #foot()="data">
        <i>{{ data.label }}</i>
      </template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fields: [
          // A column that needs custom formatting
          { key: 'name', label: 'Full Name' },
          // A regular column
          'age',
          // A regular column
          'sex'
        ],
        items: [
          { name: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
          { name: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
          { name: { first: 'Rubin', last: 'Kincade' }, sex: 'Male', age: 73 },
          { name: { first: 'Shirley', last: 'Partridge' }, sex: 'Female', age: 62 }
        ]
      }
    }
  }
</script>

<!-- b-table-head-foot-slots.vue -->

Слоты могут иметь опциональную область действия (data в приведенном выше примере) и будут иметь следующие свойства:

Свойство Тип Описание
column String Значение поля key
field Object Объект поля (из свойства fields)
label String Значение метки поля (также доступно как data.field.label)
selectAllRows Method Выделить все строки (применимо, если таблица находится в режиме selectable
clearSelected Method Отменить выбор всех строк (применимо, если таблица находится в режиме selectable

При размещении ввода, кнопок, выбора или ссылок в слоте head(...) или foot(...), обратите внимание, что событие head-clicked не будет сгенерировано, когда поле ввода, выбора, текстовой области нажаты (если они не отключены). head-clicked никогда не будет выдаваться при нажатии на ссылки или кнопки внутри слотов с областью действия (даже если они отключены)

Примечания:

  • При использовании нового синтаксиса Vue 2.6 v-slot, обратите внимание, что имена слотов не могут содержать пробелы, а при использовании шаблонов DOM в браузере имена слотов всегда будут в нижнем регистре. Чтобы обойти это, вы можете передать имя слота, используя динамические имена слотов Vue

Добавление дополнительных строк в заголовок

Если вы хотите добавить дополнительные строки в заголовок, вы можете сделать это через слот thead-top. Этот слот вставляется перед строкой ячеек заголовка и не инкапсулируется автоматически тегами <tr>..</tr>. Рекомендуется использовать вспомогательные компоненты таблицы BootstrapVue, а не собственные дочерние элементы таблицы браузера.

<template>
  <div>
    <b-table
      :items="items"
      :fields="fields"
      responsive="sm"
    >
      <template #thead-top="data">
        <b-tr>
          <b-th colspan="2"><span class="sr-only">Name and ID</span></b-th>
          <b-th variant="secondary">Type 1</b-th>
          <b-th variant="primary" colspan="3">Type 2</b-th>
          <b-th variant="danger">Type 3</b-th>
        </b-tr>
      </template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { name: 'Stephen Hawking', id: 1, type1: false, type2a: true, type2b: false, type2c: false, type3: false },
          { name: 'Johnny Appleseed', id: 2, type1: false, type2a: true, type2b: true, type2c: false, type3: false },
          { name: 'George Washington', id: 3, type1: false, type2a: false, type2b: false, type2c: false, type3: true },
          { name: 'Albert Einstein', id: 4, type1: true, type2a: false, type2b: false, type2c: true, type3: false },
          { name: 'Isaac Newton', id: 5, type1: true, type2a: true, type2b: false, type2c: true, type3: false },
        ],
        fields: [
          'name',
          { key: 'id', label: 'ID' },
          { key: 'type1', label: 'Type 1' },
          { key: 'type2a', label: 'Type 2A' },
          { key: 'type2b', label: 'Type 2B' },
          { key: 'type2c', label: 'Type 2C' },
          { key: 'type3', label: 'Type 3' }
        ]
      }
    }
  }
</script>

<!-- b-table-thead-top-slot.vue -->

Слот thead-top может опционально иметь область видимости, получая объект со следующими свойствами:

Свойство Тип Описание
columns Number Количество столбцов в отображаемой таблице
fields Array Массив объектов определения поля (нормированный к формату массива объектов)
selectAllRows Method Выделить все строки (применимо, если таблица находится в режиме selectable
clearSelected Method Отменить выбор всех строк (применимо, если таблица находится в режиме selectable

Создание пользовательского футера

Если вам нужно большее управление макетом содержимого <tfoot>, вы можете использовать опционально ограниченный слот custom-foot чтобы предоставить свои собственные строки и ячейки. Используйте BootstrapVue вспомогательные субкомпоненты таблиц <b-tr>, <b-th> и <b-td>, чтобы создать собственный макет нижнего колонтитула.

Слот custom-foot может опционально иметь область видимости, получая объект со следующими свойствами:

Свойство Тип Описание
columns Number Количество столбцов в отображаемой таблице
fields Array Массив объектов определения поля (нормированный к формату массива объектов)
items Array Массив текущих отображаемых записей элементов - после фильтрации, сортировки и разбиения на страницы

Примечания:

  • Слот custom-foot не будет отображаться, если установлено свойство foot-clone.
  • События head-clicked не генерируются при нажатии на ячейки custom-foot.
  • Иконки сортировки и сортировки недоступны для ячеек в слоте custom-foot.
  • Пользовательский нижний колонтитул не будет отображаться, когда таблица находится в режиме визуального стека.

Пользовательский пустой и пустой фильтрованный рендеринг через слоты

Помимо использования empty-text, empty-filtered-text, empty-html и empty-filtered-html, также можно обеспечить пользовательский рендеринг для таблиц, в которых нет данных для отображения, используя именованные слоты.

Чтобы эти слоты отображались, должен быть установлен атрибут show-empty, а items должен быть либо ложным, либо массивом длины 0.

<div>
  <b-table :fields="fields" :items="items" show-empty>
    <template #empty="scope">
      <h4>{{ scope.emptyText }}</h4>
    </template>
    <template #emptyfiltered="scope">
      <h4>{{ scope.emptyFilteredText }}</h4>
    </template>
  </b-table>
</div>

Слот может быть опционально ограничен. Область действия слота (scope в приведенном выше примере) будет иметь следующие свойства:

Свойство Тип Описание
emptyHtml String Свойство empty-html
emptyText String Свойство empty-text
emptyFilteredHtml String Свойство empty-filtered-html
emptyFilteredText String Свойство empty-filtered-text
fields Array Свойство fields
items Array Свойство items. Выставлено здесь для проверки null против []

Расширенные возможности

Закрепленные заголовки

Используйте свойство sticky-header, чтобы включить вертикальную прокрутку таблицы с заголовками, которые остаются фиксированными (липкими) при прокрутке тела таблицы. Установка свойства в true (или без явного значения) создаст таблицу с максимальной высотой 300px. Чтобы указать максимальную высоту, отличную от 300px, установите свойство sticky-header на допустимую высоту CSS (включая единицы), то есть sticky-header="200px". Таблицы с включенным sticky-header также автоматически становятся всегда отзывчивыми по горизонтали, независимо от настройки свойства responsive, если таблица шире, чем доступное горизонтальное пространство.

<template>
  <div>
    <b-table sticky-header :items="items" head-variant="light"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
          { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
          { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
          { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
          { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
          { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
          { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
          { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
          { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
          { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
          { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
          { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' }
        ]
      }
    }
  }
</script>

<!-- b-table-sticky-header.vue -->

Прикрепленные заметки в заголовке:

  • Свойство sticky-header не действует, если для таблицы задано свойство stacked.
  • Прикрепленные таблицы заголовков заключены в вертикально прокручиваемый <div> с установленной максимальной высотой.
  • Для поддержки sticky-header требуется пользовательский CSS BootstrapVue.
  • Bootstrap v4 использует стиль CSS border-collapse: collapsed для элементов таблицы. Это предотвращает «прилипание» границ липкого заголовка к заголовку, и, следовательно, границы будут прокручиваться при прокрутке тела. Чтобы обойти эту проблему, установите свойство no-border-collapse для таблицы (обратите внимание, что это может привести к появлению границ двойной ширины при использовании таких функций, как bordered и т. д.).
  • Функция липких заголовков использует CSS-стиль position: sticky для позиционирования заголовков. Internet Explorer не поддерживает position: sticky, поэтому в IE 11 заголовки таблиц будут прокручиваться вместе с телом таблицы.

Прикрепленные столбцы

Столбцы можно сделать липкими, чтобы они прикреплялись к левой части таблицы, когда таблица имеет горизонтальную полосу прокрутки. Чтобы сделать столбец закрепленным, установите свойство stickyColumn в определении заголовка поля. Прикрепленные столбцы будут работать только в том случае, если для таблицы установлено свойство sticky-header и/или установлено свойство responsive.

Пример: Закрепленные столбцы и заголовки

<template>
  <div>
    <div class="mb-2">
      <b-form-checkbox v-model="stickyHeader" inline>Sticky header</b-form-checkbox>
      <b-form-checkbox v-model="noCollapse" inline>No border collapse</b-form-checkbox>
    </div>
    <b-table
      :sticky-header="stickyHeader"
      :no-border-collapse="noCollapse"
      responsive
      :items="items"
      :fields="fields"
    >
      <!-- We are using utility class `text-nowrap` to help illustrate horizontal scrolling -->
      <template #head(id)="scope">
        <div class="text-nowrap">Row ID</div>
      </template>
      <template #head()="scope">
        <div class="text-nowrap">
          Heading {{ scope.label }}
        </div>
      </template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        stickyHeader: true,
        noCollapse: false,
        fields: [
          { key: 'id', stickyColumn: true, isRowHeader: true, variant: 'primary' },
          'a',
          'b',
          { key: 'c', stickyColumn: true, variant: 'info' },
          'd',
          'e',
          'f',
          'g',
          'h',
          'i',
          'j',
          'k',
          'l'
        ],
        items: [
          { id: 1, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 2, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 3, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 4, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 5, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 6, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 7, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 8, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 9, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 10, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 }
        ]
      }
    }
  }
</script>

<!-- table-sticky-columns.vue -->

Заметки к закрепленной колонке:

  • Прикрепленные столбцы не действуют, если для таблицы установлено свойство stacked.
  • Таблицы с прикрепленными столбцами требуют режимов sticky-header и/или responsive и заключены в прокручиваемый по горизонтали <div>.
  • Если у вас есть несколько столбцов, которые установлены как stickyColumn, столбцы будут визуально накладываться друг на друга, и крайние левые закрепленные столбцы могут «выглядывать» из-под следующего закрепленного столбца. Чтобы обойти это поведение, убедитесь, что ваши последние закрепленные столбцы имеют ту же ширину или шире, что и предыдущие закрепленные столбцы.
  • Bootstrap v4 использует стиль CSS border-collapse: collapsed для элементов таблицы. Это предотвращает «прилипание» границ закрепленных столбцов к столбцу, и, следовательно, эти границы будут прокручиваться при прокрутке тела. Чтобы обойти эту проблему, установите свойство no-border-collapse для таблицы (обратите внимание, что это может привести к появлению границ двойной ширины при использовании таких функций, как bordered и т. д.).
  • Для поддержки прикрепленных столбцов требуется пользовательский CSS BootstrapVue.
  • Функция липкого столбца использует стиль CSS position: sticky для позиционирования ячеек столбца. Internet Explorer не поддерживает position: sticky, поэтому для IE 11 липкий столбец будет прокручиваться вместе с телом таблицы.

Поддержка сведений о строке

Если вы хотите отобразить дополнительную информацию о записи (например, столбцы, не указанные в массиве определения полей), вы можете использовать слот row-details в сочетании со специальным логическим свойством записи элемента _showDetails.

Если запись имеет свойство _showDetails, установленное на true, и существует слот с областью действия row-details, новая строка будет показана сразу под элементом с отображаемым содержимым row-details слотом с областью видимости.

В слоте поля с областью действия вы можете переключать видимость области видимости строки row-details, вызывая функцию toggleDetails, переданную в переменную области области видимости поля. Вы можете использовать переменную слота полей области detailsShowing, чтобы определить видимость слота row-details.

Примечание: При манипулировании свойством _showDetails непосредственно в данных элемента (т. е. не через ссылку на функцию toggleDetails), _showDetails должным образом должен существовать в данных элемента для правильного реактивного обнаружения изменяется его значение. Узнайте больше об ограничениях реактивности Vue.

Доступные свойства переменной области row-details:

Свойство Тип Описание
item Object Объект данных записи всей строки
index Number Текущий видимый номер строки
fields Array Массив определения нормализованных полей (в формате массив объектов)
toggleDetails Function Функция для переключения видимости слота сведений о строке
rowSelected Boolean Будет true, если строка была выбрана. Дополнительную информацию смотрите в разделе Поддержка выбора строки
selectRow Function При вызове выбирает текущую строку. Дополнительную информацию смотрите в разделе Поддержка выбора строки
unselectRow Function При вызове отменяет выбор текущей строки. Дополнительную информацию смотрите в разделе Поддержка выбора строки

Примечание: свойства области, связанные с выбором строки, доступны только в <b-table>.

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

<template>
  <div>
    <b-table :items="items" :fields="fields" striped responsive="sm">
      <template #cell(show_details)="row">
        <b-button size="sm" @click="row.toggleDetails" class="mr-2">
          {{ row.detailsShowing ? 'Hide' : 'Show'}} Details
        </b-button>

        <!-- As `row.showDetails` is one-way, we call the toggleDetails function on @change -->
        <b-form-checkbox v-model="row.detailsShowing" @change="row.toggleDetails">
          Details via check
        </b-form-checkbox>
      </template>

      <template #row-details="row">
        <b-card>
          <b-row class="mb-2">
            <b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
            <b-col>{{ row.item.age }}</b-col>
          </b-row>

          <b-row class="mb-2">
            <b-col sm="3" class="text-sm-right"><b>Is Active:</b></b-col>
            <b-col>{{ row.item.isActive }}</b-col>
          </b-row>

          <b-button size="sm" @click="row.toggleDetails">Hide Details</b-button>
        </b-card>
      </template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fields: ['first_name', 'last_name', 'show_details'],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          {
            isActive: false,
            age: 89,
            first_name: 'Geneva',
            last_name: 'Wilson',
            _showDetails: true
          },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

<!-- b-table-details.vue -->

Поддержка выбора строки

Вы можете сделать строки доступными для выбора, используя свойство selectable в <b-table>.

Пользователи могут легко изменить режим выбора, установив свойство select-mode.

  • 'multi': Каждый клик будет выбирать/отменять выбор строки (режим по умолчанию)
  • 'single': Одновременно может быть выбрана только одна строка
  • 'range': Любая строка, по которой щелкнули, будет выбрана, любая другая будет отменена. Shift + клик выбирает диапазон строк, а Ctrl (или Cmd) + клик переключает выбранную строку.

Когда таблица является selectable и пользователь щелкает строку, <b-table> генерирует событие row-selected, передавая единственный аргумент, который представляет собой полный список выбранных элементов. Рассматривайте этот аргумент как доступный только для чтения.

Строки также могут быть выбраны и отменены программно с помощью следующих открытых методов в экземпляре <b-table> (т. е. через ссылку на экземпляр таблицы через this.$refs):

Метод Описание
selectRow(index) Выбирает строку с заданным номером index.
unselectRow(index) Отменяет выбор строки с заданным номером index.
selectAllRows() Выбирает все строки в таблице, за исключением режима single, в котором выбирается только первая строка.
clearSelected() Отменяет выбор всех строк.
isRowSelected(index) Возвращает true, если выбрана строка с заданным index, в противном случае возвращает false.

Примечания к программному выбору строк:

  • index – это отсчитываемый от нуля индекс видимых строк таблицы после применения фильтрации, сортировки и разбиения на страницы.
  • В одиночном режиме single, selectRow(index) отменяет выбор любой предыдущей выбранной строки.
  • Попытка selectRow(index) или unselectRow(index) для несуществующей строки будет проигнорирована.
  • Таблица должна быть доступна для выбора, чтобы любой из этих методов работал.
  • Вы можете отключить выбор строк с помощью событий щелчка, установив параметр no-select-on-click. После этого строки можно будет выбирать только программно.

Примечания к выбору строки:

  • Сортировка, фильтрация или пагинация таблица удалит активный выбор. Событие row-selected будет отправлено с пустым массивом ([]), если это необходимо.
  • Когда таблица находится в режиме selectable, все элементы элемента данных <tr> будут находиться в последовательности вкладок документа (tabindex="0") по причинам accessibility, и будут иметь атрибут aria-selected установлен либо в 'true', либо в 'false' в зависимости от выбранного состояния строки.
  • Когда таблица является selectable, атрибут aria-multiselect таблицы будет иметь значение 'false' для режима single и 'true' для режима multi или range.

Когда <b-table> доступен для выбора, он будет иметь класс b-table-selectable и один из следующих трех классов (в зависимости от того, какой режим используется) для элемента <table>:

  • b-table-select-single
  • b-table-select-multi
  • b-table-select-range

Когда выбрана хотя бы одна строка, класс b-table-selecting будет активен для элемента <table>. Строки, которые являются выбранными строками, будут иметь класс b-table-row-selected, примененный к элементу <tr>.

Используйте свойство selected-variant , чтобы применить цвет темы Bootstrap к выбранным строкам. Обратите внимание, что из-за порядка, в котором варианты таблицы определены в CSS Bootstrap, любой вариант строки может иметь приоритет над selected-variant. Вы можете установить selected-variant в пустую строку, если вы будете использовать другие средства, чтобы сообщить, что строка выбрана (например, слот поля с областью действия в приведенном ниже примере).

selected-variant может быть любым из стандартных (или пользовательских) вариантов базового цвета Bootstrap, или специальным вариантом таблицы active (по умолчанию), который имеет приоритет над любыми конкретными вариантами строк или ячеек.

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

<template>
  <div>
    <b-form-group
      label="Selection mode:"
      label-for="table-select-mode-select"
      label-cols-md="4"
    >
      <b-form-select
        id="table-select-mode-select"
        v-model="selectMode"
        :options="modes"
        class="mb-3"
      ></b-form-select>
    </b-form-group>

    <b-table
      :items="items"
      :fields="fields"
      :select-mode="selectMode"
      responsive="sm"
      ref="selectableTable"
      selectable
      @row-selected="onRowSelected"
    >
      <!-- Example scoped slot for select state illustrative purposes -->
      <template #cell(selected)="{ rowSelected }">
        <template v-if="rowSelected">
          <span aria-hidden="true">&check;</span>
          <span class="sr-only">Selected</span>
        </template>
        <template v-else>
          <span aria-hidden="true">&nbsp;</span>
          <span class="sr-only">Not selected</span>
        </template>
      </template>
    </b-table>
    <p>
      <b-button size="sm" @click="selectAllRows">Select all</b-button>
      <b-button size="sm" @click="clearSelected">Clear selected</b-button>
      <b-button size="sm" @click="selectThirdRow">Select 3rd row</b-button>
      <b-button size="sm" @click="unselectThirdRow">Unselect 3rd row</b-button>
    </p>
    <p>
      Selected Rows:<br>
      {{ selected }}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modes: ['multi', 'single', 'range'],
        fields: ['selected', 'isActive', 'age', 'first_name', 'last_name'],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ],
        selectMode: 'multi',
        selected: []
      }
    },
    methods: {
      onRowSelected(items) {
        this.selected = items
      },
      selectAllRows() {
        this.$refs.selectableTable.selectAllRows()
      },
      clearSelected() {
        this.$refs.selectableTable.clearSelected()
      },
      selectThirdRow() {
        // Rows are indexed from 0, so the third row is index 2
        this.$refs.selectableTable.selectRow(2)
      },
      unselectThirdRow() {
        // Rows are indexed from 0, so the third row is index 2
        this.$refs.selectableTable.unselectRow(2)
      }
    }
  }
</script>

<!-- b-table-selectable.vue -->

Поддержка перехода тела таблицы

Переходы и анимация Vue дополнительно поддерживаются в элементе <tbody> за счет внутреннего использования компонента Vue <transition-group>. Для поддержки переходов доступны три свойства (все три по умолчанию не определены):

Свойство Тип Описание
tbody-transition-props Object Объект свойств переходной группы
tbody-transition-handlers Object Объект обработчиков событий группы перехода
primary-key String Строка, указывающая поле для использования в качестве уникального ключа строки (обязательно)

Чтобы включить переходы, вам нужно указать tbody-transition-props и/или tbody-transition-handlers, а также указать, какой ключ поля использовать в качестве уникального ключа через свойство primary-key. Ваши данные должны иметь столбец (указанный установкой свойства primary-key в названии поля), который имеет уникальное значение для каждой строки, чтобы переходы работали правильно. Значение поля primary-key может быть либо уникальной строкой, либо числом. Указанное поле не обязательно должно отображаться в выходных данных отображаемой таблицы, но оно должно существовать в каждой строке данных ваших товаров.

Вы также должны предоставить CSS для обработки ваших переходов (при использовании переходов CSS) в вашем проекте.

Дополнительные сведения о переходах рендеринга списка Vue см. в официальной документации Vue JS.

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

table#table-transition-example .flip-list-move {
  transition: transform 1s;
}
<template>
  <div>
    <b-table
      id="table-transition-example"
      :items="items"
      :fields="fields"
      striped
      small
      primary-key="a"
      :tbody-transition-props="transProps"
    ></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        transProps: {
          // Transition name
          name: 'flip-list'
        },
        items: [
          { a: 2, b: 'Two', c: 'Moose' },
          { a: 1, b: 'Three', c: 'Dog' },
          { a: 3, b: 'Four', c: 'Cat' },
          { a: 4, b: 'One', c: 'Mouse' }
        ],
        fields: [
          { key: 'a', sortable: true },
          { key: 'b', sortable: true },
          { key: 'c', sortable: true }
        ]
      }
    }
  }
</script>

<!-- b-table-transitions.vue -->

Привязка v-model

Если вы привяжете переменную к свойству v-model, содержимым этой переменной будут отображаемые в данный момент записи элементов (индекс с нулевым индексом, вплоть до page-size - 1). Эта переменная (свойство value) обычно должна рассматриваться как только для чтения.

Записи в v-model представляют собой отфильтрованную/постраничную поверхностную копию items, и, следовательно, любые изменения в свойствах записи в v-model будут отражены в исходном массиве items (кроме случаев, когда items устанавливается на функцию поставщика). Удаление записи из массива v-model не удалит запись из исходного массива элементов и не удалит ее из отображаемых строк.

Примечание: Не привязывайте никакое значение напрямую к свойству value. Используйте привязку v-model.

Сортировка

Как упоминалось в разделе Поля выше, вы можете сделать столбцы сортируемыми в <b-table>. Щелчок по заголовку сортируемого столбца отсортирует столбец по возрастанию (сначала наименьший), а повторное нажатие изменит направление сортировки на убывающий (сначала по величине). Щелчок по несортируемому столбцу очистит сортировку (для отключения этой функции можно использовать свойство no-sort-reset).

Вы можете контролировать, какой столбец предварительно отсортирован и порядок сортировки (по возрастанию или по убыванию). Чтобы предварительно указать столбец для сортировки, установите свойство sort-by на ключ поля. Установите направление сортировки, установив для sort-desc значение true (по убыванию) или false (по возрастанию, по умолчанию).

  • По возрастанию: Элементы сортируются от низшего к высшему (т. е. от A до Z) и будут отображаться с наименьшим значением в первой строке с постепенно возрастающими значениями в следующих строках.
  • По убыванию: Элементы сортируются от большего к меньшему (т.е. от Z до A) и будут отображаться с наибольшим значением в первой строке с постепенно уменьшающимися значениями в следующих строках.

Пропсы sort-by и sort-desc можно превратить в двухсторонние (синхронизируемые) пропсы, добавив модификатор .sync. Затем ваши связанные переменные будут соответствующим образом обновлены на основе текущих критериев сортировки. Подробную информацию о модификаторе .sync смотрите в документации Vue.

Установка sort-by для столбца, который не определен в полях как sortable, приведет к тому, что таблица не будет сортирована.

Когда свойство foot-clone установлено, заголовки нижнего колонтитула также позволяют сортировать по клику, даже если у вас есть настраиваемые заголовки полей нижнего колонтитула. Чтобы отключить иконки сортировки и сортировку с помощью кликов по заголовку в нижнем колонтитуле, установите свойство no-footer-sorting в значение true.

<template>
  <div>
    <b-table
      :items="items"
      :fields="fields"
      :sort-by.sync="sortBy"
      :sort-desc.sync="sortDesc"
      responsive="sm"
    ></b-table>

    <div>
      Sorting By: <b>{{ sortBy }}</b>, Sort Direction:
      <b>{{ sortDesc ? 'Descending' : 'Ascending' }}</b>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        sortBy: 'age',
        sortDesc: false,
        fields: [
          { key: 'last_name', sortable: true },
          { key: 'first_name', sortable: true },
          { key: 'age', sortable: true },
          { key: 'isActive', sortable: false }
        ],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

<!-- b-table-sorting.vue -->

Выравнивание иконки сортировки

По умолчанию иконки сортировки выравниваются по правому краю в ячейке заголовка. Вы можете изменить иконки, чтобы они были выровнены по левому краю, установив свойство sort-icon-left на <b-table>.

<template>
  <div>
    <b-table
      :items="items"
      :fields="fields"
      :sort-by.sync="sortBy"
      :sort-desc.sync="sortDesc"
      sort-icon-left
      responsive="sm"
    ></b-table>

    <div>
      Sorting By: <b>{{ sortBy }}</b>, Sort Direction:
      <b>{{ sortDesc ? 'Descending' : 'Ascending' }}</b>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        sortBy: 'age',
        sortDesc: false,
        fields: [
          { key: 'last_name', sortable: true },
          { key: 'first_name', sortable: true },
          { key: 'age', sortable: true },
          { key: 'isActive', sortable: false }
        ],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

<!-- b-table-sorting-left.vue -->

Кастомизация иконок сортировки

Иконки сортировки генерируются с использованием фоновых изображений SVG. Значки можно изменить, обновив переменные BootstrapVue SASS/SCSS и перекомпилировав исходный код SCSS. Обратитесь к разделу theming для получения подробной информации о настройке Bootstrap и сгенерированного BootstrapVue CSS.

Процедура сортировки-сравнения

Внутренняя встроенная функция sort-compare по умолчанию сортирует указанный ключ поля key на основе данных в базовом объекте записи (или по отформатированному значению, если поле имеет функцию форматирования, а поле имеет свойство sortByFormatted если установлено значение true). Значение поля сначала преобразуется в строку, если это объект, а затем сортируется.

Примечания:

  • Встроенная процедура sort-compare не может сортировать на основе пользовательского рендеринга данных поля: слоты с ограниченной областью используются только для представления только для чтения и не влияют на базовые данные.
  • Поля, которые имеют функцию formatter (виртуальное поле или обычное поле), могут быть отсортированы по значению, возвращаемому функцией форматирования, если свойство поля для sortByFormatted установлено значение true. При желании вы можете передать ссылку на функцию форматирования в sortByFormatted, чтобы отформатировать значение перед сортировкой. По умолчанию установлено значение false, которое будет сортироваться по исходному значению поля. Это применимо только для встроенной процедуры сравнения сортировки.
  • По умолчанию внутренняя процедура сортировки сначала сортирует null, undefined или пустые строковые значения (меньше, чем любые другие значения). Чтобы сортировать так, чтобы null, undefined или пустые строковые значения отображались последними (больше, чем любое другое значение), установите свойство sort-null-last в true.

Для настройки обработки сравнения сортировки смотрите раздел Пользовательская процедура сравнения сортировки ниже.

Внутренняя сортировка и обработка локали

Внутренняя процедура сравнения сортировки использует String.prototype.localeCompare() для сравнения строковое значение столбца (если сравниваемые значения не являются обоими типами Number или обоими типами Date). Собственный метод браузера localeCompare() принимает строку locale (или массив строк локали) и объект options для управления сортировкой строк. Параметры по умолчанию: { numeric: true }, а локаль undefined (использует локаль браузера по умолчанию).

Вы можете изменить локаль (или локали) с помощью свойства sort-compare-locale , чтобы установить язык(и) для сортировки, а также передать параметры сортировки с помощью свойств sort-compare-options.

Свойство sort-compare-locale по умолчанию имеет значение undefined, которое использует локаль браузера (или среды выполнения Node.js) по умолчанию. Свойство sort-compare-locale может принимать либо строку BCP 47 language tag, либо массив таких тегов. Дополнительные сведения о локалях см. в разделе Идентификация и согласование локалей на MDN.

Свойство sort-compare-options принимает объект, содержащий любое из следующих свойств:

  • localeMatcher: Используемый алгоритм сопоставления локали. Возможные значения: 'lookup' и 'best fit'. По умолчанию установлено 'best fit'. Подробнее об этом параметре смотрите на странице MDN Intl.
  • sensitivity: Какие различия в строках должны привести к ненулевым значениям результатов сравнения. Возможные значения:
    • 'base': Только строки, отличающиеся базовыми буквами, сравниваются как неравные. Примеры: a ≠ b, a = á, a = A.
    • 'accent': Только строки, отличающиеся базовыми буквами или ударениями и другими диакритическими знаками, сравниваются как неравные. Примеры: a ≠ b, a ≠ á, a = A.
    • 'case': Только строки, отличающиеся базовыми буквами или регистром, сравниваются как неравные. Примеры: a ≠ b, a = á, a ≠ A.
    • 'variant': (по умолчанию) Строки, отличающиеся базовыми буквами, ударениями и другими диакритическими знаками или сравниваемые по регистру как неравные. Другие различия также могут быть приняты во внимание. Примеры: a ≠ b, a ≠ á, a ≠ A.
  • ignorePunctuation: Следует ли игнорировать знаки препинания. Возможные значения: true и false. По умолчанию установлено значение false.
  • numeric: Следует ли использовать числовое сопоставление, например, '1' < '2' < '10'. Возможные значения: true и false. По умолчанию установлено значение false. Обратите внимание, что реализации (браузеры, среды выполнения) не обязаны поддерживать это свойство, поэтому его можно игнорировать.
  • caseFirst: Сначала должен сортироваться верхний или нижний регистр. Возможные значения: 'upper', 'lower' или 'false' (используйте значение по умолчанию для локали). По умолчанию установлено значение 'false'. ImpleРеализации не требуются для поддержки этого свойства.
  • 'usage': Всегда установлена 'sort' по <b-table>

Пример 1: Если вы хотите отсортировать немецкие слова, установите sort-compare-locale="de" (в немецком языке, ä сортирует до z) или шведский устанавливает sort-compare-locale="sv" (в шведском языке ä сортирует после z)

Пример 2: Чтобы сравнить числа, которые являются строками, численно и игнорировать регистр и диакритические знаки:

<b-table :sort-compare-options="{ numeric: true, sensitivity: 'base' }" ...>

Примечания:

Пользовательская процедура сортировки-сравнения

Вы можете предоставить свою собственную процедуру сравнения сортировки, передав ссылку на функцию свойства sort-compare. Процедуре sort-compare передается семь (7) аргументов, из которых последние 4 являются необязательными:

  • первые два аргумента (a и b) являются объектами записи для сравниваемых строк
  • третий аргумент - поле key, по которому сортируется (sortBy)
  • четвертый аргумент (sortDesc) - это порядок, в котором <b-table> будет отображать записи (true для убывания, false для возрастания)
  • пятый аргумент - это ссылка на formatter function поля или значение filterByFormatted поля, если это ссылка на функцию. Если средство форматирования не найдено, это значение будет undefined. Вам нужно будет вызвать этот метод, чтобы получить отформатированное значение поля: valA = formatter(a[key], key, a) и valB = formatter(b[key], key, b), если вам нужно сортировать по отформатированному значению. Это будет undefined, если свойство поля sortByFormatted не равно true или не является функцией форматирования reference, или функция форматирования полей не может быть найдена.
  • шестой аргумент - это значение свойства sort-compare-options (по умолчанию { numeric: true })
  • седьмой аргумент - это значение свойства sort-compare-locale (по умолчанию undefined)

Шестой и седьмой аргументы можно использовать, если вы используете String.prototype.localeCompare() для сравнения строк.

В большинстве типичных ситуаций вам нужно использовать только первые три аргумента. Четвертый аргумент — направление сортировки — обычно не следует использовать, так как b-table будет обрабатывать направление, и это значение обычно требуется только при специальной обработке того, как сортируются значения null и/или undefined (т.е. сортировка null/undefined первым или последним).

Процедура должна возвращать либо -1 (или отрицательное значение) для a[key] < b[key] , 0 для a[key] === b[key], либо 1 (или положительное значение) для a[key] > b[key].

Ваша пользовательская процедура сравнения сортировки также может возвращать null или false, чтобы вернуться к встроенной процедуре сравнения сортировки для конкретного key. Вы можете использовать эту функцию (то есть возвращая null), чтобы ваша пользовательская процедура сравнения сортировки обрабатывала только определенные поля (ключи), такие как особый случай виртуальных столбцов (слот с областью действия), и имела внутреннюю (встроенную) сортировку. -compare обрабатывает все другие поля.

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

function sortCompare(aRow, bRow, key, sortDesc, formatter, compareOptions, compareLocale) {
  const a = aRow[key] // or use Lodash `_.get()`
  const b = bRow[key]
  if (
    (typeof a === 'number' && typeof b === 'number') ||
    (a instanceof Date && b instanceof Date)
  ) {
    // If both compared fields are native numbers or both are native dates
    return a < b ? -1 : a > b ? 1 : 0
  } else {
    // Otherwise stringify the field data and use String.prototype.localeCompare
    return toString(a).localeCompare(toString(b), compareLocale, compareOptions)
  }
}

// Helper function to stringify the values of an Object
function toString(value) {
  if (value === null || typeof value === 'undefined') {
    return ''
  } else if (value instanceof Object) {
    return Object.keys(value)
      .sort()
      .map(key => toString(value[key]))
      .join(' ')
  } else {
    return String(value)
  }
}

Отключить локальную сортировку

Если вы хотите полностью управлять сортировкой в своем приложении, вы можете отключить локальную сортировку в <b-table>, установив свойство no-local-sorting в значение true, сохраняя при этом функциональность сортируемого заголовка (через события sort-changed или context-changed, а также синхронизируемые свойства).

Вы можете использовать синхронизируемые свойства sort-by.sync и sort-desc.sync для обнаружения изменений в столбце сортировки и направлении.

Кроме того, при щелчке по заголовку (или нижнему колонтитулу) сортируемого столбца будет сгенерировано событие sort-changed с одним аргументом, содержащим объект контекста <b-table>. Подробнее о событии sort-changed и объекте контекста см. в разделе Обнаружение изменения сортировки ниже.

Когда no-local-sorting равно true, свойство sort-compare не действует.

Изменить начальное направление сортировки

Управляйте порядком, в котором применяется сортировка по возрастанию и убыванию при нажатии на заголовок сортируемого столбца, с помощью свойства sort-direction. Значение по умолчанию 'asc' сначала применяет сортировку по возрастанию (когда столбец в данный момент не отсортирован). Чтобы изменить поведение и сначала отсортировать по убыванию, установите его в 'desc'.

Если вы не хотите, чтобы текущее направление сортировки менялось при щелчке по заголовку другого сортируемого столбца, установите для sort-direction значение 'last'. Это сохранит направление сортировки ранее отсортированного столбца.

Для начального направления сортировки отдельного столбца (которое применяется при переходе столбца от несортированного к отсортированному) укажите свойство sortDirection в fields. Смотрите Полный пример ниже для примера использования этой функции.

Фильтрация

Фильтрация, если она используется, по умолчанию применяется к данным массива исходных товаров. b-table предоставляет несколько вариантов фильтрации данных.

В настоящее время невозможно фильтровать на основе результата форматирования через слоты полей с областью действия.

Встроенная фильтрация

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

Со встроенной функцией фильтра по умолчанию значение свойства filter может быть либо строкой, либо объектом RegExp (регулярные выражения не должны иметь установленный глобальный флаг /g).

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

Установите для свойства filter значение null или пустую строку, чтобы очистить текущий фильтр.

Встроенные параметры фильтрации

Существует несколько вариантов управления тем, к каким данным применяется фильтр.

  • Свойство filter-ignored-fields принимает массив ключей поля top-level (непосредственные свойства данных строки), которые следует игнорировать при фильтрации.
  • Свойство filter-included-fields принимает массив ключей полей top-level (непосредственные свойства данных строки), которые следует использовать при фильтрации. Все другие ключи полей, не включенные в этот массив, будут игнорироваться. Эта функция может быть полезна, если вы хотите отфильтровать определенные столбцы. Если указанный массив пуст, то включаются все поля, кроме тех, которые указаны в свойстве filter-ignored-fields. Если ключ поля указан как в полях filter-ignored-fields и filter-included-fields, так и в полях, filter-included-fields, то поля, включенные фильтром, имеют приоритет.
  • Обычно фильтр <b-table> основан на строковых данных записи. Если для поля указана функция formatter, вы можете дополнительно фильтровать на основе результата форматирования, установив свойство определения поля filterByFormatted на true. Если поле не имеет функции форматирования, этот параметр игнорируется. Вы можете дополнительно передать функцию форматирования reference, которая будет использоваться только для фильтрации, в свойство определения поля filterByFormatted.

Свойства filter-ignored-fields и filter-included-fields, а также свойство определения поля filterByFormatted не действуют при использовании пользовательской функции фильтра или поставщика элементов фильтрация на основе.

Функция пользовательского фильтра

Вы также можете использовать пользовательскую функцию фильтра, установив свойство filter-function в ссылку на пользовательскую тестовую функцию фильтра. В функцию фильтра передаются два аргумента:

  • объект данных записи строки исходного элемента. Рассматривайте этот аргумент как доступный только для чтения.
  • содержимое свойства filter (может быть строка, регулярное выражение, массив или объект)

Функция должна возвращать true, если запись соответствует вашим критериям, или false, если запись должна быть отфильтрована.

Для правильного реактивного обновления отображаемых данных, когда фильтрация не выполняется, вы должны установить свойство filter в null или пустую строку (а не пустой объект или массив). Функция фильтра не будет вызываться, если свойство filter является ложным значением.

Отображение empty-filter-text зависит от достоверности свойства filter.

Фильтрация событий

Когда применяется локальная фильтрация и результирующее количество элементов изменяется, <b-table> генерирует событие filtered с двумя аргументами:

  • ссылка на массив, который представляет собой полный список элементов, прошедших процедуру фильтрации. Рассматривайте этот аргумент как доступный только для чтения.
  • количество записей, прошедших проверку фильтром (длина первого аргумента)

Установка для параметра filter значения null или пустой строки очистит фильтрацию локальных элементов.

Изменения критериев фильтра debouncing

deprecated in v2.1.0 Используйте функцию debounce <b-form-input> instead.

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

Чтобы помочь смягчить ситуацию такого типа, <b-table> принимает значение тайм-аута отката (в миллисекундах) через свойство filter-debounce. По умолчанию 0 (миллисекунды). Если указано значение больше 0, фильтр будет ожидать это время, прежде чем обновлять результаты таблицы. Если значение свойств filter изменится до истечения этого тайм-аута, фильтрация будет снова отложена до истечения тайм-аута debounce.

При использовании предлагаемое значение filter-debounce должно быть в диапазоне от 100 до 200 миллисекунд, но другие значения могут быть более подходящими для вашего варианта использования.

Использование этого свойства может быть полезным при использовании фильтрации провайдеров с функциями провайдера элементов, чтобы уменьшить количество вызовов к вашему серверному API.

Фильтрация заметок

Смотрите Полный пример ниже для примера использования функции filter.

Пагинация

<b-table> поддерживает встроенную разбивку данных элемента на страницы. Вы можете контролировать, сколько строк отображается одновременно, установив свойство per-page на максимальное количество строк, которое вы хотите отобразить, и используя свойство current-page, чтобы указать, какую страницу отображать (начиная со страницы 1). Если вы установите для current-page значение, превышающее вычисленное количество страниц, строки не будут отображаться.

Вы можете использовать компонент <b-pagination> в сочетании с <b-table> для управления разбиением на страницы.

Установка для per-page значения 0 (по умолчанию) отключит функцию пагинации локальных элементов.

Использование функций поставщика элементов

Как упоминалось в разделе свойства Items, можно использовать функцию для предоставления данных строки (элементов), указав ссылку на функцию через свойства items.

Функция провайдера вызывается со следующей сигнатурой:

provider(ctx, [callback])

ctx — это объект контекста, связанный с состоянием таблицы, и содержит следующие свойства:

Свойство Тип Описание
currentPage Number Текущий номер страницы (начиная с 1, значение свойства current-page)
perPage Number Максимальное количество строк на странице для отображения (значение свойства per-page)
filter String or RegExp or Object Значение свойства filter
sortBy String Текущий ключ столбца, который сортируется, или пустая строка, если сортировка не выполняется
sortDesc Boolean Текущее направление сортировки (true для убывания, false для возрастания)
apiUrl String Значение, предоставленное свойство api-url. null, если ничего не указано.

Второй аргумент callback является необязательным параметром при использовании асинхронного метода обратного вызова.

Пример: возврат массива данных (синхронно):

function myProvider() {
  let items = []

  // Perform any items processing needed

  // Must return an array
  return items || []
}

Пример: использование обратного вызова для возврата данных (асинхронно):

function myProvider(ctx, callback) {
  const params = '?page=' + ctx.currentPage + '&size=' + ctx.perPage

  this.fetchData('/some/url' + params)
    .then(data => {
      // Pluck the array of items off our axios response
      const items = data.items
      // Provide the array of items to the callback
      callback(items)
    })
    .catch(() => {
      callback([])
    })

  // Must return null or undefined to signal b-table that callback is being used
  return null
}

Пример: использование обещания для возврата данных (асинхронно):

function myProvider(ctx) {
  const promise = axios.get('/some/url?page=' + ctx.currentPage + '&size=' + ctx.perPage)

  // Must return a promise that resolves to an array of items
  return promise.then(data => {
    // Pluck the array of items off our axios response
    const items = data.items
    // Must return an array of items or an empty array if an error occurred
    return items || []
  })
}

Пример: использование асинхронной функции (полусинхронной):

Возможно использование асинхронного метода для возврата массива элементов:

async function myProvider(ctx) {
  try {
    const response = await axios.get(`/some/url?page=${ctx.currentPage}&size=${ctx.perPage}`)
    return response.items
  } catch (error) {
    return []
  }
}

Обратите внимание, что не все браузеры изначально поддерживают async/await. Для браузеров, не поддерживающих асинхронные методы async, вам потребуется транспилировать код.

Автоматическое состояние занятости таблицы

<b-table> автоматически отслеживает/управляет своим состоянием busy, когда используются функции поставщика элементов, однако оно также предоставляет свойство busy, которое можно использовать либо для переопределения внутреннего состояния busy, либо для мониторинга текущего состояние занятости <b-pagination> в вашем приложении с использованием двустороннего модификатора .sync.

Примечание: для того, чтобы позволить <b-table> полностью отслеживать свое состояние busy, функция поставщика пользовательских элементов должна обрабатывать ошибки из источников данных и возвращать пустой массив в <b-table>.

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

<template>
  <div>
    <b-table
      id="my-table"
      :busy.sync="isBusy"
      :items="myProvider"
      :fields="fields"
      ...
    ></b-table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        isBusy: false
      }
    }
    methods: {
      myProvider () {
        // Here we don't set isBusy prop, so busy state will be
        // handled by table itself
        // this.isBusy = true
        let promise = axios.get('/some/url')

        return promise.then((data) => {
          const items = data.items
          // Here we could override the busy state, setting isBusy to false
          // this.isBusy = false
          return(items)
        }).catch(error => {
          // Here we could override the busy state, setting isBusy to false
          // this.isBusy = false
          // Returning an empty array, allows table to correctly handle
          // internal busy state in case of error
          return []
        })
      }
    }
  }
</script>

При использовании поставщика async/await:

async function myProvider(ctx) {
  this.isBusy = true
  try {
    const response = await axios.get(`/some/url?page=${ctx.currentPage}&size=${ctx.perPage}`)
    this.isBusy = false
    return response.items
  } catch (error) {
    this.isBusy = false
    return []
  }
}

Примечания:

  • Если вы вручную поместите таблицу в состояние busy, поставщик элементов не будет вызываться/обновляться до тех пор, пока состояние busy не будет установлено на false.
  • Все события, связанные с кликами и наведением, а также события с изменением сортировки не будут генерироваться, когда они находятся в состоянии busy (устанавливаются либо автоматически во время обновления поставщика, либо при установке вручную).

Поставщик пейджинга, фильтрации и сортировки

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

Вы можете отключить пейджинг, фильтрацию и сортировку провайдера (отдельно), установив для следующих свойств b-table значение true:

Свойство Тип По умолчанию Описание
no-provider-paging Boolean false Когда true, разрешается использование пагинации локальных данных b-table
no-provider-sorting Boolean false Когда true, разрешается использование локальной сортировки b-table
no-provider-filtering Boolean false Когда true, разрешается использование локальной фильтрации b-table

Когда no-provider-paging равно false (по умолчанию), вы должны возвращать только максимальное количество записей perPage.

Примечания:

  • <b-table> требуется ссылка на ваши значения разбиения на страницы и фильтрации, чтобы инициировать вызов функции провайдера. Поэтому обязательно привяжите свойства per-page, current-page и filter в b-table, чтобы инициировать вызов функции обновления провайдера (если у вас нет соответствующего свойства no-provider-* установите значение true).
  • Опция no-local-sorting не действует, когда items является функцией провайдера.
  • При использовании фильтрации провайдера вы можете обнаружить, что для параметра debounce на <b-form-input> установлено значение больше 100 ms поможет свести к минимуму количество вызовов вашего серверного API по мере того, как пользователь вводит критерии.

Принудительное обновление данных таблицы

Вы также можете инициировать обновление функции провайдера, отправив событие refresh::table в $root с единственным аргументом, являющимся id вашей b-table. Чтобы это работало, у вас должен быть уникальный идентификатор на вашей таблице.

this.$root.$emit('bv::refresh::table', 'my-table')

Или вызвав метод refresh() для ссылки на таблицу

<div>
  <b-table ref="table" ... ></b-table>
</div>
this.$refs.table.refresh()

Примечание: Если таблица находится в состоянии busy (т. е. в данный момент выполняется обновление поставщика), обновление будет ожидать завершения текущего обновления. Если в настоящее время ожидается обновление и запрошено новое обновление, то произойдет только одно обновление.

Обнаружение изменения сортировки

Прослушивая событие <b-table> sort-changed, вы можете обнаружить, когда изменились ключ и направление сортировки.

<div>
  <b-table @sort-changed="sortingChanged" ... ></b-table>
</div>

Событие sort-changed предоставляет единственный аргумент объекта контекста текущего состояния таблицы. Этот объект контекста имеет тот же формат, что и функции поставщика элементов.

export default {
  methods: {
    sortingChanged(ctx) {
      // ctx.sortBy   ==> Field key for sorting by (or null for no sorting)
      // ctx.sortDesc ==> true if sorting descending, false otherwise
    }
  }
}

Вы также можете получить текущие значения sortBy и sortDesc, используя двусторонние свойства :sort-by.sync и :sort-desc.sync соответственно (подробности смотрите в разделе Сортировка выше).

<div>
  <b-table :sort-by.sync="mySortBy" :sort-desc.sync="mySortDesc" ... ></b-table>
</div>

Рендеринг на стороне сервера

Особую осторожность следует проявлять при использовании рендеринга на стороне сервера (SSR) и функции провайдера items. Убедитесь, что вы обрабатываете любые особые ситуации, которые могут потребоваться на стороне сервера при извлечении ваших данных!

Когда <b-table> монтируется в документе, он автоматически инициирует вызов обновления провайдера.

Легковесные таблицы

<b-table-lite> представляет собой прекрасную альтернативу <b-table>, если вам просто нужно простое отображение табличных данных. Компонент <b-table-lite> предоставляет все функции стиля и форматирования <b-table> (включая сведения о строках и поддержку стека), но исключая следующие функции:

  • Фильтрация
  • Сортировка
  • Пагинация
  • Поддержка поставщиков товаров
  • Выбираемые строки
  • Состояние занятой таблицы и стиль
  • Исправление верхнего и нижнего рядов
  • Поддержка пустых строк

Легкая таблица как плагин

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

Простые таблицы

Компонент <b-table-simple> дает пользователю полный контроль над визуализацией содержимого таблицы, обеспечивая при этом основные стили таблиц Bootstrap v4. <b-table-simple> — это компонент-оболочка вокруг элемента <table>. Внутри компонента, через слот default, вы можете использовать любой или все вспомогательные компоненты таблицы BootstrapVue: <b-thead>, <b-tfoot>, <b-tbody>, <b-tr>, <b-th>, <b-td> и элементы HTML5 <caption>, <colgroup> и <col>. Вопреки названию компонента, с помощью <b-table-simple> можно создавать простые или сложные макеты таблиц.

<b-table-simple> предоставляет базовые параметры стиля с помощью свойств: striped, bordered, borderless, outlined, small, hover, dark, fixed, responsive и sticky-header. Обратите внимание, что доступен режим с накоплением, но для создания заголовков ячеек требуется дополнительная разметка, как описано в разделе Простые таблицы и режим с накоплением ниже. Прикрепленные столбцы также поддерживаются, но также требуют небольшой дополнительной разметки, чтобы указать, какие столбцы должны быть закреплены. Смотрите ниже дополнительную информацию об использовании липких столбцов.

Поскольку b-table-simple — это всего лишь компонент-оболочка, внутри которого вам нужно отображать содержимое, он не предоставляет каких-либо расширенных функций <b-table> (т. е. события строки, события заголовка, сортировка , пагинация, фильтрация, фут-клон, элементы, поля и т.д.).

<div>
  <b-table-simple hover small caption-top responsive>
    <caption>Items sold in August, grouped by Country and City:</caption>
    <colgroup><col><col></colgroup>
    <colgroup><col><col><col></colgroup>
    <colgroup><col><col></colgroup>
    <b-thead head-variant="dark">
      <b-tr>
        <b-th colspan="2">Region</b-th>
        <b-th colspan="3">Clothes</b-th>
        <b-th colspan="2">Accessories</b-th>
      </b-tr>
      <b-tr>
        <b-th>Country</b-th>
        <b-th>City</b-th>
        <b-th>Trousers</b-th>
        <b-th>Skirts</b-th>
        <b-th>Dresses</b-th>
        <b-th>Bracelets</b-th>
        <b-th>Rings</b-th>
      </b-tr>
    </b-thead>
    <b-tbody>
      <b-tr>
        <b-th rowspan="3">Belgium</b-th>
        <b-th class="text-right">Antwerp</b-th>
        <b-td>56</b-td>
        <b-td>22</b-td>
        <b-td>43</b-td>
        <b-td variant="success">72</b-td>
        <b-td>23</b-td>
      </b-tr>
      <b-tr>
        <b-th class="text-right">Gent</b-th>
        <b-td>46</b-td>
        <b-td variant="warning">18</b-td>
        <b-td>50</b-td>
        <b-td>61</b-td>
        <b-td variant="danger">15</b-td>
      </b-tr>
      <b-tr>
        <b-th class="text-right">Brussels</b-th>
        <b-td>51</b-td>
        <b-td>27</b-td>
        <b-td>38</b-td>
        <b-td>69</b-td>
        <b-td>28</b-td>
      </b-tr>
      <b-tr>
        <b-th rowspan="2">The Netherlands</b-th>
        <b-th class="text-right">Amsterdam</b-th>
        <b-td variant="success">89</b-td>
        <b-td>34</b-td>
        <b-td>69</b-td>
        <b-td>85</b-td>
        <b-td>38</b-td>
      </b-tr>
      <b-tr>
        <b-th class="text-right">Utrecht</b-th>
        <b-td>80</b-td>
        <b-td variant="danger">12</b-td>
        <b-td>43</b-td>
        <b-td>36</b-td>
        <b-td variant="warning">19</b-td>
      </b-tr>
    </b-tbody>
    <b-tfoot>
      <b-tr>
        <b-td colspan="7" variant="secondary" class="text-right">
          Total Rows: <b>5</b>
        </b-td>
      </b-tr>
    </b-tfoot>
  </b-table-simple>
</div>

<!-- b-table-simple.vue -->

В режиме responsive или sticky-header заголовка элемент <table> помещается внутрь элемента <div>. Если вам нужно применить дополнительные классы к элементу <table>, используйте свойство table-class.

Любые дополнительные атрибуты, указанные для <b-table-simple>, всегда будут применяться к элементу <table>.

Простые таблицы и режим с накоплением

Требуется немного дополнительной разметки в ячейках тела <b-table-simple>, когда таблица находится в режиме стека. В частности, BootstrapVue использует специальный атрибут данных для создания заголовка ячейки, который вы можете указать в <b-td> или <b-th> через свойство stacked-heading. Поддерживаются только простые строки (не разметка HTML), так как мы используем псевдоэлемент ::before и свойство css content.

Вот та же таблица, что и выше, настроенная как всегда сложенная, которая имеет дополнительную разметку для обработки режима с накоплением (специально для создания заголовков ячеек):

<div>
  <b-table-simple hover small caption-top stacked>
    <caption>Items sold in August, grouped by Country and City:</caption>
    <colgroup><col><col></colgroup>
    <colgroup><col><col><col></colgroup>
    <colgroup><col><col></colgroup>
    <b-thead head-variant="dark">
      <b-tr>
        <b-th colspan="2">Region</b-th>
        <b-th colspan="3">Clothes</b-th>
        <b-th colspan="2">Accessories</b-th>
      </b-tr>
      <b-tr>
        <b-th>Country</b-th>
        <b-th>City</b-th>
        <b-th>Trousers</b-th>
        <b-th>Skirts</b-th>
        <b-th>Dresses</b-th>
        <b-th>Bracelets</b-th>
        <b-th>Rings</b-th>
      </b-tr>
    </b-thead>
    <b-tbody>
      <b-tr>
        <b-th rowspan="3" class="text-center">Belgium (3 Cities)</b-th>
        <b-th stacked-heading="City" class="text-left">Antwerp</b-th>
        <b-td stacked-heading="Clothes: Trousers">56</b-td>
        <b-td stacked-heading="Clothes: Skirts">22</b-td>
        <b-td stacked-heading="Clothes: Dresses">43</b-td>
        <b-td stacked-heading="Accessories: Bracelets" variant="success">72</b-td>
        <b-td stacked-heading="Accessories: Rings">23</b-td>
      </b-tr>
      <b-tr>
        <b-th stacked-heading="City">Gent</b-th>
        <b-td stacked-heading="Clothes: Trousers">46</b-td>
        <b-td stacked-heading="Clothes: Skirts" variant="warning">18</b-td>
        <b-td stacked-heading="Clothes: Dresses">50</b-td>
        <b-td stacked-heading="Accessories: Bracelets">61</b-td>
        <b-td stacked-heading="Accessories: Rings" variant="danger">15</b-td>
      </b-tr>
      <b-tr>
        <b-th stacked-heading="City">Brussels</b-th>
        <b-td stacked-heading="Clothes: Trousers">51</b-td>
        <b-td stacked-heading="Clothes: Skirts">27</b-td>
        <b-td stacked-heading="Clothes: Dresses">38</b-td>
        <b-td stacked-heading="Accessories: Bracelets">69</b-td>
        <b-td stacked-heading="Accessories: Rings">28</b-td>
      </b-tr>
      <b-tr>
        <b-th rowspan="2" class="text-center">The Netherlands (2 Cities)</b-th>
        <b-th stacked-heading="City">Amsterdam</b-th>
        <b-td stacked-heading="Clothes: Trousers" variant="success">89</b-td>
        <b-td stacked-heading="Clothes: Skirts">34</b-td>
        <b-td stacked-heading="Clothes: Dresses">69</b-td>
        <b-td stacked-heading="Accessories: Bracelets">85</b-td>
        <b-td stacked-heading="Accessories: Rings">38</b-td>
      </b-tr>
      <b-tr>
        <b-th stacked-heading="City">Utrecht</b-th>
        <b-td stacked-heading="Clothes: Trousers">80</b-td>
        <b-td stacked-heading="Clothes: Skirts" variant="danger">12</b-td>
        <b-td stacked-heading="Clothes: Dresses">43</b-td>
        <b-td stacked-heading="Accessories: Bracelets">36</b-td>
        <b-td stacked-heading="Accessories: Rings" variant="warning">19</b-td>
      </b-tr>
    </b-tbody>
    <b-tfoot>
      <b-tr>
        <b-td colspan="7" variant="secondary" class="text-right">
          Total Rows: <b>5</b>
        </b-td>
      </b-tr>
    </b-tfoot>
  </b-table-simple>
</div>

<!-- b-table-simple-stacked.vue -->

Подобно <b-table> и <b-table-lite>, хедеры таблицы (<thead>) и футеры (<tfoot>) визуально скрыты, когда таблица визуально сложена. Если вам нужен верхний или нижний колонтитул, вы можете сделать это, создав дополнительный <b-tr> внутри компонента <b-tbody> (или во втором компоненте <b-tbody>), и установите роль columnheader в дочерних ячейках <b-th> и используйте Bootstrap v4 классы адаптивных дисплеев, чтобы скрыть дополнительную строку (или <b-tbody>) выше определенной контрольной точки, когда таблица больше не выглядит стекированной (контрольная точка должна совпадать с установленной вами контрольной точкой сложенной таблицы), т. е. <b-tr class="d-md-none"> будет скрывать row на средних и широких экранах, в то время как <b-tbody class="d-md-none"> скроет группу строк на средних и широких экранах.

Примечание: многоуровневый режим с <b-table-simple> требует использования вспомогательных компонентов таблицы BootstrapVue. Использование обычных тегов элементов <tbody>, <tr>, <td> и <th> не будет работать должным образом, и они не будут автоматически применять какие-либо из необходимых атрибутов доступности.

Простые таблицы и липкие столбцы

Прикрепленные столбцы поддерживаются с помощью <b-table-simple>, но вам нужно будет установить свойство sticky-column для каждой ячейки таблицы (в группах строк thead, tbody и tfoot) в столбце, который должен быть липким. Например:

<b-table-simple responsive>
  <b-thead>
    <b-tr>
      <b-th sticky-column>Sticky Column Header</b-th>
      <b-th>Heading 1</b-th>
      <b-th>Heading 2</b-th>
      <b-th>Heading 3</b-th>
      <b-th>Heading 4</b-th>
    </b-tr>
  </b-thead>
  <b-tbody>
    <b-tr>
      <b-th sticky-column>Sticky Column Row Header</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr>
      <b-th sticky-column>Sticky Column Row Header</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
  </b-tbody>
  <b-tfoot>
    <b-tr>
      <b-th sticky-column>Sticky Column Footer</b-th>
      <b-th>Heading 1</b-th>
      <b-th>Heading 2</b-th>
      <b-th>Heading 3</b-th>
      <b-th>Heading 4</b-th>
    </b-tr>
  </b-tfoot>
</b-table-simple>

Как и в случае с <b-table> и <b-table-lite>, закрепленные столбцы не поддерживаются, если свойство stacked установлено для <b-table-simple>.

Таблица простая как плагин

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

Вспомогательные компоненты таблицы

BootstrapVue предоставляет дополнительные вспомогательные дочерние компоненты при использовании <b-table-simple> или именованных слотов top-row, bottom-row, thead-top и custom-foot (все из которых принимать дочерние элементы таблицы). Вспомогательные компоненты следующие:

  • b-tbody (только <b-table-simple>)
  • b-thead (только <b-table-simple>)
  • b-tfoot (только <b-table-simple>)
  • b-tr
  • b-td
  • b-th

Эти компоненты оптимизированы для обработки преобразования вариантов в соответствующие классы (например, для обработки dark режима таблицы) и автоматического применения определенных атрибутов доступности (например, role и scope). Они также могут генерировать составные таблицы, а также липкие заголовки и столбцы, разметку. Компоненты <b-table> и <b-table-lite> используют эти вспомогательные компоненты для внутреннего использования.

В примере Простые таблицы мы используем вспомогательные компоненты <b-thead>, <b-tbody>, <b-tr>, <b-th>, <b-td> и <b-tfoot>. Хотя вы можете использовать обычные дочерние элементы таблицы (например, <tbody>, <tr>, <td> и т. д.) внутри <b-table-simple>, а именованные слоты top-row, bottom-row и thead-top, рекомендуется использовать эти вспомогательные компоненты таблицы BootstrapVue <b-t*>. Обратите внимание, что для <caption>, <colgroup> или <col> нет вспомогательных компонентов, поэтому вы можете использовать эти три элемента HTML5 непосредственно в <b-table-simple>.

  • Вспомогательные компоненты таблицы <b-tr>, <b-td> и <b-th> принимают свойство variant, whкоторое будет применять один из цветов темы Bootstrap (поддерживаются пользовательские цвета темы) через theming.) и будет автоматически корректироваться для использования правильного класса вариантов на основе dark режима таблицы.
  • Вспомогательные компоненты <b-thead>, <b-tfoot> принимают свойства head-variant и foot-variant соответственно. Поддерживаемые значения: 'dark', 'light' или null (null использует фон таблицы по умолчанию). Эти варианты также управляют цветом текста (светлый текст для 'dark' варианта и темный текст для 'light' варианта).
  • Атрибуты доступности role и scope автоматически устанавливаются для компонентов <b-th> и <b-td> в зависимости от их местоположения (thead, tbody или tfoot) и их свойств rowspan или colspan. Вы можете переопределить автоматические значения scope и role, установив соответствующий атрибут вспомогательного компонента.
  • Для вспомогательных компонентов <b-tbody>, <b-thead> и <b-tfoot> будет применена соответствующая role по умолчанию для 'rowgroup', если вы не переопределите роль. путем предоставления атрибута role.
  • Для вспомогательного компонента <b-tr> будет применена соответствующая role по умолчанию 'row', если вы не переопределите роль, указав атрибут role. <b-tr> не добавляет scope.
  • Элемент <b-tbody> поддерживает рендеринг Vue <transition-group>, когда используются один или оба свойства tbody-transition-props и tbody-transition-handlers. Дополнительные сведения смотрите в разделе Поддержка перехода к основной части таблицы.

Доступность

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

При использовании <b-table-simple> с компонентами вспомогательной таблицы элементы будут иметь соответствующие роли, применяемые по умолчанию, которые вы можете при желании переопределить. При использовании обработчиков кликов во вспомогательных компонентах <b-table-simple> вам потребуется применить соответствующие атрибуты aria-* и установить tabindex="0", чтобы сделать действия щелчка доступными для чтения с экрана и пользователи только с клавиатурой. Вы также должны прослушивать @keydown.enter.prevent, чтобы обрабатывать пользователей, нажимающих Enter, чтобы инициировать ваш щелчок по ячейкам или строкам (требуется для специальных возможностей для пользователей, использующих только клавиатуру).

Доступность заголовков

Если столбец (поле) является сортируемым (только для <b-table>) или есть зарегистрированный слушатель head-clicked (<b-table> и <b-table-lite>), ячейки хедера (и футера) <th> будут помещены в последовательность вкладок документа (через tabindex="0") для доступа пользователей, использующих только клавиатуру и программ чтения с экрана, чтобы пользователь мог инициировать щелчок (путем нажав Enter в ячейках заголовка.

Доступность строки данных

Когда таблица находится в режиме selectable (только <b-table> и свойство no-select-on-click не установлено), или если зарегистрирован прослушиватель событий row-clicked event listener registered (<b-table> и <b-table-lite>), все строки элементов данных (элементы <tr>) будут помещены в последовательность вкладок документа (через tabindex="0"), чтобы разрешить пользователи, использующие только клавиатуру и программы чтения с экрана, могут щелкать строки, нажимая Enter или Space.

Когда строки элементов таблицы помещаются в последовательность вкладок документа (<b-table> и <b-table-lite>), они также будут поддерживать базовую навигацию с помощью клавиатуры при фокусировании:

  • Down переместит к следующей строке
  • Up переместит к предыдущей строке
  • End или Down+Shift переместятся к последней строке
  • Home или Up+Shift переместятся к первой строке
  • Enter или Space для клика по строке

Доступность событий строки

Обратите внимание, что следующие события/действия на основе строк (доступные с <b-table> и <b-table-lite>) не считаются доступными и должны использоваться только в том случае, если функциональность не является критической или может быть предоставлена через другие средства:

  • row-dblclicked
  • row-contextmenu
  • row-hovered
  • row-unhovered
  • row-middle-clicked

Обратите внимание, что событие row-middle-clicked поддерживается не во всех браузерах (например, в IE, Safari и большинстве мобильных браузеров). При прослушивании событий row-middle-clicked , происходящих на элементах, которые не поддерживают ввод или навигацию, вам часто нужно явно запретить другие действия по умолчанию, сопоставленные с действием нажатия средней кнопки мыши. В Windows это обычно автопрокрутка, а в macOS и Linux обычно вставка из буфера обмена. Это можно сделать, предотвратив поведение по умолчанию событий mousedown или pointerdown.

Кроме того, вам может потребоваться избегать открытия контекстного меню системы или браузера по умолчанию после щелчка правой кнопкой мыши. Из-за различий во времени между операционными системами это также не является предотвратимым поведением по умолчанию row-middle-clicked. Вместо этого это можно сделать, предотвратив поведение по умолчанию события row-contextmenu.

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

Полный пример

<template>
  <b-container fluid>
    <!-- User Interface controls -->
    <b-row>
      <b-col lg="6" class="my-1">
        <b-form-group
          label="Sort"
          label-for="sort-by-select"
          label-cols-sm="3"
          label-align-sm="right"
          label-size="sm"
          class="mb-0"
          v-slot="{ ariaDescribedby }"
        >
          <b-input-group size="sm">
            <b-form-select
              id="sort-by-select"
              v-model="sortBy"
              :options="sortOptions"
              :aria-describedby="ariaDescribedby"
              class="w-75"
            >
              <template #first>
                <option value="">-- none --</option>
              </template>
            </b-form-select>

            <b-form-select
              v-model="sortDesc"
              :disabled="!sortBy"
              :aria-describedby="ariaDescribedby"
              size="sm"
              class="w-25"
            >
              <option :value="false">Asc</option>
              <option :value="true">Desc</option>
            </b-form-select>
          </b-input-group>
        </b-form-group>
      </b-col>

      <b-col lg="6" class="my-1">
        <b-form-group
          label="Initial sort"
          label-for="initial-sort-select"
          label-cols-sm="3"
          label-align-sm="right"
          label-size="sm"
          class="mb-0"
        >
          <b-form-select
            id="initial-sort-select"
            v-model="sortDirection"
            :options="['asc', 'desc', 'last']"
            size="sm"
          ></b-form-select>
        </b-form-group>
      </b-col>

      <b-col lg="6" class="my-1">
        <b-form-group
          label="Filter"
          label-for="filter-input"
          label-cols-sm="3"
          label-align-sm="right"
          label-size="sm"
          class="mb-0"
        >
          <b-input-group size="sm">
            <b-form-input
              id="filter-input"
              v-model="filter"
              type="search"
              placeholder="Type to Search"
            ></b-form-input>

            <b-input-group-append>
              <b-button :disabled="!filter" @click="filter = ''">Clear</b-button>
            </b-input-group-append>
          </b-input-group>
        </b-form-group>
      </b-col>

      <b-col lg="6" class="my-1">
        <b-form-group
          v-model="sortDirection"
          label="Filter On"
          description="Leave all unchecked to filter on all data"
          label-cols-sm="3"
          label-align-sm="right"
          label-size="sm"
          class="mb-0"
          v-slot="{ ariaDescribedby }"
        >
          <b-form-checkbox-group
            v-model="filterOn"
            :aria-describedby="ariaDescribedby"
            class="mt-1"
          >
            <b-form-checkbox value="name">Name</b-form-checkbox>
            <b-form-checkbox value="age">Age</b-form-checkbox>
            <b-form-checkbox value="isActive">Active</b-form-checkbox>
          </b-form-checkbox-group>
        </b-form-group>
      </b-col>

      <b-col sm="5" md="6" class="my-1">
        <b-form-group
          label="Per page"
          label-for="per-page-select"
          label-cols-sm="6"
          label-cols-md="4"
          label-cols-lg="3"
          label-align-sm="right"
          label-size="sm"
          class="mb-0"
        >
          <b-form-select
            id="per-page-select"
            v-model="perPage"
            :options="pageOptions"
            size="sm"
          ></b-form-select>
        </b-form-group>
      </b-col>

      <b-col sm="7" md="6" class="my-1">
        <b-pagination
          v-model="currentPage"
          :total-rows="totalRows"
          :per-page="perPage"
          align="fill"
          size="sm"
          class="my-0"
        ></b-pagination>
      </b-col>
    </b-row>

    <!-- Main table element -->
    <b-table
      :items="items"
      :fields="fields"
      :current-page="currentPage"
      :per-page="perPage"
      :filter="filter"
      :filter-included-fields="filterOn"
      :sort-by.sync="sortBy"
      :sort-desc.sync="sortDesc"
      :sort-direction="sortDirection"
      stacked="md"
      show-empty
      small
      @filtered="onFiltered"
    >
      <template #cell(name)="row">
        {{ row.value.first }} {{ row.value.last }}
      </template>

      <template #cell(actions)="row">
        <b-button size="sm" @click="info(row.item, row.index, $event.target)" class="mr-1">
          Info modal
        </b-button>
        <b-button size="sm" @click="row.toggleDetails">
          {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
        </b-button>
      </template>

      <template #row-details="row">
        <b-card>
          <ul>
            <li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li>
          </ul>
        </b-card>
      </template>
    </b-table>

    <!-- Info modal -->
    <b-modal :id="infoModal.id" :title="infoModal.title" ok-only @hide="resetInfoModal">
      <pre>{{ infoModal.content }}</pre>
    </b-modal>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { isActive: true, age: 40, name: { first: 'Dickerson', last: 'Macdonald' } },
          { isActive: false, age: 21, name: { first: 'Larsen', last: 'Shaw' } },
          {
            isActive: false,
            age: 9,
            name: { first: 'Mini', last: 'Navarro' },
            _rowVariant: 'success'
          },
          { isActive: false, age: 89, name: { first: 'Geneva', last: 'Wilson' } },
          { isActive: true, age: 38, name: { first: 'Jami', last: 'Carney' } },
          { isActive: false, age: 27, name: { first: 'Essie', last: 'Dunlap' } },
          { isActive: true, age: 40, name: { first: 'Thor', last: 'Macdonald' } },
          {
            isActive: true,
            age: 87,
            name: { first: 'Larsen', last: 'Shaw' },
            _cellVariants: { age: 'danger', isActive: 'warning' }
          },
          { isActive: false, age: 26, name: { first: 'Mitzi', last: 'Navarro' } },
          { isActive: false, age: 22, name: { first: 'Genevieve', last: 'Wilson' } },
          { isActive: true, age: 38, name: { first: 'John', last: 'Carney' } },
          { isActive: false, age: 29, name: { first: 'Dick', last: 'Dunlap' } }
        ],
        fields: [
          { key: 'name', label: 'Person full name', sortable: true, sortDirection: 'desc' },
          { key: 'age', label: 'Person age', sortable: true, class: 'text-center' },
          {
            key: 'isActive',
            label: 'Is Active',
            formatter: (value, key, item) => {
              return value ? 'Yes' : 'No'
            },
            sortable: true,
            sortByFormatted: true,
            filterByFormatted: true
          },
          { key: 'actions', label: 'Actions' }
        ],
        totalRows: 1,
        currentPage: 1,
        perPage: 5,
        pageOptions: [5, 10, 15, { value: 100, text: "Show a lot" }],
        sortBy: '',
        sortDesc: false,
        sortDirection: 'asc',
        filter: null,
        filterOn: [],
        infoModal: {
          id: 'info-modal',
          title: '',
          content: ''
        }
      }
    },
    computed: {
      sortOptions() {
        // Create an options list from our fields
        return this.fields
          .filter(f => f.sortable)
          .map(f => {
            return { text: f.label, value: f.key }
          })
      }
    },
    mounted() {
      // Set the initial number of items
      this.totalRows = this.items.length
    },
    methods: {
      info(item, index, button) {
        this.infoModal.title = `Row index: ${index}`
        this.infoModal.content = JSON.stringify(item, null, 2)
        this.$root.$emit('bv::show::modal', this.infoModal.id, button)
      },
      resetInfoModal() {
        this.infoModal.title = ''
        this.infoModal.content = ''
      },
      onFiltered(filteredItems) {
        // Trigger pagination to update the number of buttons/pages due to filtering
        this.totalRows = filteredItems.length
        this.currentPage = 1
      }
    }
  }
</script>

<!-- b-table-complete.vue -->

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

<b-table>

Свойства

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

Свойство
(Click to sort ascending)
Тип
(Click to sort ascending)
По умолчанию
Описание
api-url
StringПройти через свойство. Передано как часть объекта контекста, отправленного в функцию поставщика элементов
bordered
BooleanfalseДобавляет границы ко всем ячейкам и заголовкам
borderless
BooleanfalseУдаляет все границы ячеек
busy
BooleanfalseЕсли установлено, переводит таблицу в состояние занятости. Автоматически устанавливается при вызове функции поставщика элементов
caption
StringТекстовая строка для размещения в элементе заголовка
caption-html
Использовать с осторожностью
StringСтрока HTML для размещения в элементе заголовка
caption-top
BooleanfalseВизуально поместите заголовок таблицы над таблицей. Значение по умолчанию ниже
current-page
Number или String1Текущий номер страницы, отображаемый при разбиении таблицы на страницы. Начиная с 1 и выше
dark
BooleanfalseПереводит таблицу в темный режим
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
ArraynullМассив имен полей или массив объектов определения поля
filter
Array или Object или String или RegExpКритерии фильтрации. Внутренняя фильтрация поддерживает только строковые критерии или критерии RegExpr
filter-debounce
v2.0.0+
Number или String0Время в миллисекундах для отмены изменений в критериях фильтра перед фильтрацией записей
filter-function
FunctionСсылка на функцию, которую следует использовать вместо внутренней функции фильтрации. Подробнее смотрите в документации
filter-ignored-fields
Array[]Массив полей верхнего уровня, которые следует игнорировать при фильтрации данных элемента
filter-included-fields
Array[]Массив полей для включения при фильтрации. Переопределяет filter-ignore-fields
fixed
BooleanfalseДелает все столбцы одинаковой ширины (таблица с фиксированным макетом). Ускорит рендеринг для больших таблиц. Ширину столбцов можно задать с помощью CSS или colgroup
foot-clone
BooleanfalseВключить нижний колонтитул таблицы и клонировать содержимое заголовка по умолчанию
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
BooleanfalseВключает стиль при наведении на строки
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+
BooleanfalseОтключить сворачивание границ таблицы. Полезно, когда таблица имеет липкие заголовки или столбцы
no-footer-sorting
BooleanfalseКогда используется встроенный форматер, установка этого свойства отключит возможность сортировки в нижнем колонтитуле
no-local-sorting
BooleanfalseОтключена процедура внутренней сортировки и ожидается, что пользователь предоставит отсортированные элементы. Элементы управления сортировкой по-прежнему будут доступны
no-provider-filtering
BooleanfalseЕсли установлено, использует внутреннюю фильтрацию для разбиения данных на страницы. В противном случае ожидается, что провайдер выполнит фильтрацию
no-provider-paging
BooleanfalseЕсли установлено, использует внутреннее разбиение на страницы для разбиения данных на страницы. В противном случае ожидается, что поставщик элементов выполнит пейджинг
no-provider-sorting
BooleanfalseЕсли установлено, использует внутреннюю сортировку для сортировки данных. В противном случае ожидается, что поставщик элементов выполнит сортировку
no-select-on-click
v2.1.0+
BooleanfalseОтключить выбор строки с помощью событий щелчка. Выбор строки будет доступен только программно
no-sort-reset
BooleanfalseКогда таблица сортируется, щелчок по заголовку любого несортируемого столбца очистит текущие значения сортировки. Установите эту опору, чтобы отключить эту функцию
outlined
BooleanfalseДобавляет границу контура к элементу таблицы
per-page
Number или String0Количество строк для отображения на странице. Установите 0, чтобы отключить разбиение на страницы
primary-key
StringИмя поля таблицы, которое содержит гарантированное уникальное значение для каждой строки. Необходим для поддержки перехода tbody, а также ускоряет рендеринг таблицы
responsive
Boolean или StringfalseДелает таблицу адаптивной по ширине, добавляя горизонтальную полосу прокрутки. Установите значение true, чтобы всегда реагировать, или установите одну из контрольных точек, чтобы переключиться с адаптивного режима на нормальный: 'sm', 'md', 'lg', 'xl'
select-mode
String'multi'Выбираемый режим для таблицы, когда установлен 'selectable'. Возможные значения: 'single', 'multi' или 'range'
selectable
BooleanfalseЕсли установлено, помещает строки тела таблицы в режим выбора
selected-variant
String'active'Вариант цветовой темы Bootstrap для установки выбранных строк. Используйте любой из стандартных цветовых вариантов темы Bootstrap или специальный вариант строки таблицы 'active' (по умолчанию). Установите пустую строку, чтобы не использовать вариант
show-empty
BooleanfalseЕсли этот параметр включен и нет записей элементов для отображения, отображается сообщение о том, что нет строк для отображения
small
BooleanfalseВизуализирует таблицу с меньшим заполнением ячеек
sort-by
StringИмя поля, которое в данный момент сортируется. Установите значение null, чтобы очистить сортировку. Синхронизируется с модификатором свойства .sync
sort-compare
FunctionСсылка на функцию для сортировки-сравнения двух строк данных. По умолчанию используется процедура сравнения внутренней сортировки. Подробнее смотрите документацию
sort-compare-locale
Array или StringСтрока локали (или массив строк локали), указывающая язык при сортировке. Подробнее смотрите документацию
sort-compare-options
Object{ 'numeric': true }Объект, содержащий конфигурацию сортировки для метода 'String.prototype.sortLocale'. Подробнее смотрите документацию
sort-desc
BooleanfalseУстановите значение true, чтобы отсортировать столбец в порядке убывания. Синхронизируется с модификатором свойства .sync
sort-direction
String'asc'Начальное направление сортировки для сортировки несортированного столбца по: 'asc', 'desc' или 'last' (для использования предыдущего направления сортировки)
sort-icon-left
BooleanfalseПомещает элемент управления сортировкой слева от текста заголовка. По умолчанию находится справа от текста заголовка
sort-null-last
BooleanfalseПри сортировке нулевые и неопределенные значения будут отсортированы первыми (или последними, в зависимости от 'sort-desc'). Установите это свойство для сортировки нулевых значений в последнюю очередь. Применимо только к внутренней сортировке
stacked
Boolean или StringfalseПоместите таблицу в режим стека. Установите значение true для всегда сложенных или установите одну из контрольных точек для переключения с сложенного на обычный: 'sm', 'md', 'lg', 'xl'
sticky-header
Boolean или StringfalseДелает заголовок таблицы липким. Установите значение true для максимальной высоты таблицы высотой 300 пикселей или установите любую допустимую высоту CSS (включая единицы измерения)
striped
BooleanfalseПрименяет чередование к строкам tbody
table-class
Array или Object или StringКласс CSS (или классы) для применения к элементу таблицы
table-variant
StringПримените вариант цвета темы Bootstrap ко всей таблице
tbody-class
Array или Object или StringCSS-класс (или классы) для применения к элементу tbody
tbody-tr-attr
v2.2.0+
Object или FunctionАтрибуты, добавляемые к каждому tr в tbody, или функция, возвращающая такие атрибуты (Подробнее смотрите документацию)
tbody-tr-class
Array или Object или String или FunctionCSS-класс (или классы) для применения к элементу 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 или StringCSS-класс (или классы) для применения к элементу tfoot
tfoot-tr-class
Array или Object или StringCSS-класс (или классы) для применения к элементу tr в tfoot
thead-class
Array или Object или StringCSS-класс (или классы) для применения к элементу thead
thead-tr-class
Array или Object или StringCSS-класс (или классы) для применения к элементу tr в thead
value
v-model
Array[]Текущие отображаемые данные строки. Только для чтения. Не устанавливайте значение для этого свойства

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

v-model

Свойство
Событие
valueinput

Слоты

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

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

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

Событие
Аргументы
Описание
bv::refresh::table

id - Идентификатор таблицы для обновления данных

Обновить данные определенной таблицы, когда это событие генерируется в $root

<b-table-lite>

Свойства

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

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

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

v-model

Свойство
Событие
valueinput

Слоты

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

<b-table-simple>

Свойства

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

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

Слоты

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

<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>

Свойства

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

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

Слоты

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

<b-tfoot>

Свойства

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

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

Слоты

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

<b-tr>

Свойства

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

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

Слоты

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

<b-td>

Свойства

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

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

Слоты

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

<b-th>

Свойства

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

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

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

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

Компонент
Именованный экспорт
Путь импорта
<b-table>BTablebootstrap-vue
<b-table-lite>BTableLitebootstrap-vue
<b-table-simple>BTableSimplebootstrap-vue
<b-tbody>BTbodybootstrap-vue
<b-thead>BTheadbootstrap-vue
<b-tfoot>BTfootbootstrap-vue
<b-tr>BTrbootstrap-vue
<b-td>BTdbootstrap-vue
<b-th>BThbootstrap-vue

Пример:

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

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

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

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

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

  • TableLitePlugin
  • TableSimplePlugin

Пример:

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