Выпадающие списки

Базовое

Раскрывающийся список используется как управляемый компонент со свойством v-model вместе с коллекцией параметров. Метка и значение опции определяются свойствами optionLabel и optionValue соответственно. Обратите внимание: когда параметры представляют собой простые примитивные значения, такие как массив строк, никакие optionLabel и optionValue не требуются.

Сообщение пустого списка указывается через пропс emptyMessage

value: 
value: 
value:

Размеры поля

value: 
value: 
value:

С отметкой

Альтернативный способ выделить выбранную опцию — отобразить галочку с помощью свойства checkmark. 

value:

Редактируемый

Если присутствует editable, то можно ввести значение

value:

С группировкой

Опции можно группировать, если предусмотрены вложенные структуры данных. Чтобы определить метку группы, необходимо свойство optionGroupLabel, а также optionGroupChildren, чтобы определить свойство, которое относится к дочерним элементам группы. 

value:

Свой шаблон

Параметры и отображение выбранных параметров поддерживают расширение базового шаблона через <template #option> и <template #value>. 

value:

Фильтр значений

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

value:

Очищаемый

Когда пропс showClear="true", появится кнопка для сброса значения

value: null

Фиксация позиции выпадающего списка

value: 
value: 
value:
vue
<script lang="ts" setup>
// non-reactive
const cityLst = [
  { text: 'New York', value: 'NY' },
  { text: 'Rome', value: 'RM' },
  { text: 'London', value: 'LDN' },
  { text: 'Istanbul', value: 'IST' },
  { text: 'Paris', value: 'PRS' }
];
// end non-reactive

const value = ref();
</script>

<template>
  <div class="row justify-content-center">
    <div class="col-4">
      <BDropdown
        v-model="value"
        class="mb-3"
        option-label="text"
        placeholder="Наверх"
        position="top"
        option-value="value"
        :options="cityLst"
        show-clear
      />
      <pre class="mb-0">value: {{ value }}</pre>
    </div>
    <div class="col-4">
      <BDropdown
        v-model="value"
        class="mb-3"
        option-label="text"
        placeholder="Авто"
        position="auto"
        option-value="value"
        :options="cityLst"
        show-clear
      />
      <pre class="mb-0">value: {{ value }}</pre>
    </div>
    <div class="col-4">
      <BDropdown
        v-model="value"
        class="mb-3"
        option-label="text"
        placeholder="Вниз"
        position="bottom"
        option-value="value"
        :options="cityLst"
        show-clear
      />
      <pre class="mb-0">value: {{ value }}</pre>
    </div>
  </div>
</template>

Блокирование конкретных значений списка

value:
vue
<script lang="ts" setup>
// non-reactive
const cityLst = [
  { text: 'New York', value: 'NY' },
  { text: 'Rome', value: 'RM' },
  { text: 'London', value: 'LDN' },
  { text: 'Istanbul', value: 'IST' },
  { text: 'Paris', value: 'PRS' }
];
// end non-reactive

function checkOptionDisabled(lstItem: (typeof cityLst)[number]) {
  return ['NY', 'RM'].includes(lstItem.value);
}

const value = ref();
</script>

<template>
  <div class="row justify-content-center">
    <div class="col-4">
      <BDropdown
        v-model="value"
        class="mb-3"
        option-label="text"
        placeholder="Выберите из списка"
        position="top"
        option-value="value"
        :options="cityLst"
        :option-disabled="checkOptionDisabled"
        show-clear
      />
      <pre class="mb-0">value: {{ value }}</pre>
    </div>
  </div>
</template>

Состояние поля

Выключенный

Когда пропс disabled="true", элемент нельзя редактировать и установить фокус.