下拉式表单(Form Select)

使用自定义样式引导自定义 <select> 。（可选）根据数组，对象数组或对象指定选项。

通过将数组或对象传递给 options 属性来生成您的选择选项：

Selected: 
<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <b-form-select v-model="selected" :options="options" size="sm" class="mt-3"></b-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select an option' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Selected Option' },
          { value: { C: '3PO' }, text: 'This is an option with object value' },
          { value: 'd', text: 'This one is disabled', disabled: true }
        ]
      }
    }
  }
</script>

您甚至可以使用 options 属性定义选项组：

Selected: 
<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select an option' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Selected Option', disabled: true },
          {
            label: 'Grouped options',
            options: [
              { value: { C: '3PO' }, text: 'Option with object value' },
              { value: { R: '2D2' }, text: 'Another option with object value' }
            ]
          }
        ]
      }
    }
  }
</script>

或手动提供您的选项和选项组：

Selected: 
<template>
  <div>
    <b-form-select v-model="selected" class="mb-3">
      <b-form-select-option :value="null">Please select an option</b-form-select-option>
      <b-form-select-option value="a">Option A</b-form-select-option>
      <b-form-select-option value="b" disabled>Option B (disabled)</b-form-select-option>
      <b-form-select-option-group label="Grouped options">
        <b-form-select-option :value="{ C: '3PO' }">Option with object value</b-form-select-option>
        <b-form-select-option :value="{ R: '2D2' }">Another option with object value</b-form-select-option>
      </b-form-select-option-group>
    </b-form-select>

    <div class="mt-2">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null
      }
    }
  }
</script>

随意将 options 属性与 <b-form-select-option> 和 <b-form-select-option-group> 混合使用。手动放置的选项和选项组将显示在通过选项属性生成的选项 下方 。要将手动选项和选项组放置在 options 属性指定的 options 之上 ，请 first【首先】使用命名的插槽。

Selected: 
<template>
  <div>
    <b-form-select v-model="selected" :options="options" class="mb-3">
      <!-- This slot appears above the options from 'options' prop -->
      <template v-slot:first>
        <b-form-select-option :value="null" disabled>-- Please select an option --</b-form-select-option>
      </template>

      <!-- These options will appear after the ones from 'options' prop -->
      <b-form-select-option value="C">Option C</b-form-select-option>
      <b-form-select-option value="D">Option D</b-form-select-option>
    </b-form-select>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: 'A', text: 'Option A (from options prop)' },
          { value: 'B', text: 'Option B (from options prop)' }
        ]
      }
    }
  }
</script>

选项属性

options 可以是字符串或对象的数组，也可以是键值对象。可用字段：

  • value 将在 v-model 上设置的所选值
  • disabled 禁用的项目供选择
  • text 显示文本或 html 显示基本的嵌入式 html

value 可以是字符串，数字或简单对象。避免在值中使用复杂类型。

如果同时提供 html 和 text ，则 html 优先。html 字段中仅支持基本/本机 HTML（组件不起作用）。请注意，并非所有浏览器都会在 <select> 的 <option> 元素内呈现内联 html（即 <i> ，<strong> 等）。

请谨慎 将用户提供的内容放在 html 字段中，因为如果不先 清理 用户提供的字符串，这可能会使您容易受到 XSS attacks【XSS攻击】。

选项作为数组

const options = ['A', 'B', 'C', { text: 'D', value: { d: 1 }, disabled: true }, 'E', 'F']

如果数组条目是字符串，则它将用于生成的 value 和 text 字段。

您可以在数组中使用字符串和 objects【对象】进行混合。

在内部，BootstrapVue 会将上面的数组转换为下面的数组（ array of objects【对象数组】）格式：

const options = [
  { text: 'A', value: 'A', disabled: false },
  { text: 'B', value: 'B', disabled: false },
  { text: 'C', value: 'C', disabled: false },
  { text: 'D', value: { d: 1 }, disabled: true },
  { text: 'E', value: 'E', disabled: false },
  { text: 'F', value: 'F', disabled: false }
]

选项作为对象数组

const options = [
  { text: 'Item 1', value: 'first' },
  { text: 'Item 2', value: 'second' },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4' },
  { text: 'Item 5', value: { foo: 'bar', baz: true } }
]

如果缺少 value ，则 text 将同时用作 value 和 text 字段。 如果使用 html 属性，则 必须 提供 value属性。

New in v2.2.0 要定义选项组，只需添加一个带有 label 属性的对象作为组名，并添加一个带有该组选项数组的 options 属性。

const options = [
  { text: 'Item 1', value: 'first' },
  { text: 'Item 2', value: 'second' },
  {
    label: 'Grouped options',
    options: [{ html: '<b>Item</b> 3', value: 'third', disabled: true }, { text: 'Item 4' }]
  },
  { text: 'Item 5', value: { foo: 'bar', baz: true } }
]

选项作为对象

不推荐使用

键映射到 value ，值映射到选项 text 。

const options = {
  a: 'Item A',
  b: 'Item B',
  c: { html: 'Item C', disabled: true },
  d: { text: 'Item D', value: 'overridden_value' },
  e: { text: 'Item E', value: { foo: 'bar', baz: true } }
}

在内部，BootstrapVue 会将上述对象转换为以下数组（ array of objects【对象数组】）格式：

const options = [
  { text: 'Item A', value: 'a', disabled: false },
  { text: 'Item B', value: 'b', disabled: false },
  { html: 'Item C', value: 'c', disabled: false },
  { text: 'Item D', value: 'overridden_value', disabled: true },
  { text: 'Item E', value: { foo: 'bar', baz: true }, disabled: false }
]

注意： 使用对象格式时，不能 保证最终数组的顺序。因此，建议使用前面提到的任何一种数组格式。

更改选项字段名称

如果要自定义字段属性名称（例如，使用 name 字段显示 text ），可以通过将 text-field ，html-field ，value-field ，和 disabled-field 属性设置为包含以下内容的字符串来轻松更改它们，您想使用的属性名称：

Selected: A
<template>
  <div>
    <b-form-select
      v-model="selected"
      :options="options"
      class="mb-3"
      value-field="item"
      text-field="name"
      disabled-field="notEnabled"
    ></b-form-select>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'A',
        options: [
          { item: 'A', name: 'Option A' },
          { item: 'B', name: 'Option B' },
          { item: 'D', name: 'Option C', notEnabled: true },
          { item: { d: 1 }, name: 'Option D' }
        ]
      }
    }
  }
</script>

选项说明

如果 v-model 表达式的初始值与任何选项都不匹配，则 <b-form-select> 组件（在底层为原生 HTML5 <select> ）将呈 未选择 状态。在 iOS 上，这将导致用户无法选择第一项，因为在这种情况下，iOS 不会触发更改事件。因此，建议您提供一个具有空值的禁用选项作为第一个选项。

<b-form-select v-model="selected" :options="options">
  <template v-slot:first>
    <b-form-select-option value="" disabled>-- Please select an option --</b-form-select-option>
  </template>
</b-form-select>

有关更多详细信息，请参见 Vue select 文档。

标准（单一）选择

默认情况下，会应用 Bootstrap v4的自定义选择样式。

单一模式下的值

在非 multiple 模式下，<b-form-select> 返回当前所选选项的单个 value 。

Selected: 
<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select some item' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Default Selected Option' },
          { value: 'c', text: 'This is another option' },
          { value: 'd', text: 'This one is disabled', disabled: true }
        ]
      }
    }
  }
</script>

选择大小（显示的行）

您可以使用 select-size 属性将自定义选择切换到选择列表框中，而不是下拉列表中。将 select-size 属性设置为大于 1 的数值，以控制可见多少行选项。

请注意，当 select-size 设置为大于 1 的值时，除非也设置了 multiple 属性，否则将 不会 应用 Bootstrap v4 自定义样式。

请注意，并非所有的移动浏览器都会将选择显示为列表框。

Selected: 
<template>
  <div>
    <b-form-select v-model="selected" :options="options" :select-size="4"></b-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select some item' },
          { value: 'a', text: 'This is option a' },
          { value: 'b', text: 'Default Selected Option b' },
          { value: 'c', text: 'This is option c' },
          { value: 'd', text: 'This one is disabled', disabled: true },
          { value: 'e', text: 'This is option e' },
          { value: 'e', text: 'This is option f' }
        ]
      }
    }
  }
</script>

多选支持

通过设置属性倍数来启用 multiple【多选】模式，并通过将 select-size 设置为要显示的行数来控制在多选列表框中显示多少行。默认设置是让浏览器使用其默认设置（通常为 4）。

多模式下的值

在 multiple 模式下，<b-form-select> 始终返回选项值的数组。在 multiple 种模式下，必须 提供数组引用作为 v-model 。

Selected: [ "b" ]
<template>
  <div>
    <b-form-select v-model="selected" :options="options" multiple :select-size="4"></b-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: ['b'], // Array reference
        options: [
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Default Selected Option' },
          { value: 'c', text: 'This is another option' },
          { value: 'd', text: 'This one is disabled', disabled: true },
          { value: 'e', text: 'This is option e' },
          { value: 'f', text: 'This is option f' },
          { value: 'g', text: 'This is option g' }
        ]
      }
    }
  }
</script>

控制尺寸

使用 size 属性将大小控件的表单控件文本大小分别设置为 sm 或 lg ，分别用于小号或大号。

默认情况下，<b-form-select> 将占据显示容器的整个宽度。要控制选择宽度，请将输入放置在标准 Bootstrap 网格列内。

自动获取焦点

当 autofocus 属性设置为 <b-form-select> 时，输入将在插入（即 mounted【安装】）到文档中时自动对焦，或者在 Vue <keep-alive> 组件内部重新激活。请注意，此属性 不会 在输入上设置 autofocus 属性，也无法告诉输入何时可见。

上下文状态

Bootstrap 包括大多数表单控件上 valid 【有效】和 invalid【无效】状态的验证样式。

一般来说，您需要针对特定类型的反馈使用特定状态：

  • false（表示无效状态）非常适合存在阻塞或必填字段的情况。用户必须正确填写此字段才能提交表单。
  • true（表示有效状态）非常适合在整个表单中都进行逐字段验证并希望鼓励用户遍历其余字段的情况。
  • null 不显示验证状态（既不有效也不无效）

要将上下文状态图标之一应用于 <b-form-select> ，请将 state 属性设置为 false（对于无效），true（对于有效）或 null（无验证状态）。

向辅助技术和色盲用户传达上下文验证状态

使用这些上下文状态来表示表单控件的状态仅提供基于颜色的可视指示，而不会将其传达给辅助技术的用户（例如屏幕阅读器）或色盲用户。

确保还提供了备用状态指示。例如，您可以在表单控件的 <label> 文本本身中包含有关状态的提示，或者通过提供其他帮助文本块（通过 <b-form-group> 或 <b-form-*-feedback> ）来提供提示。专门针对辅助技术，还可以为无效的表单控件分配一个 aria-invalid="true" 属性（请参见下文）。

ARIA aria-invalid 属性：

当 <b-form-select> 具有无效的上下文状态（即state = false ）时，您可能还希望将 <b-form-select> 属性 aria-invalid 设置为 true 。

支持的 invalid 值为：

  • false（默认）未检测到错误
  • true 该值验证失败。

当 state 设置为 false 时，aria-invalid 也将设置为 true。

非自定义选择

将 plain 属性设置为呈现本机浏览器 <select>（尽管 .form-control 类将始终放在 select 上）。

对于 select-size 属性设置为大于1的非 multiple【多个】选择，将始终呈现 plain【纯】选择。

组件引用

<b-form-select>

查看源代码

组件别名

<b-form-select> 也可以通过以下别名使用：

  • <b-select>

注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。

属性

属性 (Click to sort Ascending) 类型 默认值 描述
id String 用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
name String 设置表单控件上“name”属性的值
disabled Boolean 设置为“true”时，禁用组件的功能并将其置于禁用状态
required Boolean false 将“required”属性添加到表单控件
form String 表单控件所属的表单的ID。在控件上设置“form”属性
autofocus Boolean false 设置为“true”时，尝试在安装控件时自动将其调焦，或者在 keep-alive【保持活动】状态时将其重新激活。未在控件上设置“autofocus”属性
size String 设置组件外观的大小。'sm'，'md'（默认）或'lg'
state Boolean 控制组件的验证状态外观。“true”表示有效，“false”表示无效”，“null”表示无验证状态
plain Boolean false 以普通模式而不是自定义样式模式呈现表单控件
options Array or Object [] 要在组件中渲染的项目数组
value-field String 'value' “options”数组中的字段名称，该字段名称应用于该值
text-field String 'text' “options”数组中应用于文本标签的字段名称
html-field String 'html' “options”数组中的字段名称，应该用于 html 标签而不是文本字段。请谨慎使用。
disabled-field String 'disabled' “options”数组中应用于禁用状态的字段名称
label-field String 'label'
options-field String 'options'
value v-model Any 选择的当前值。当设置了'multiple'属性时，应该设置为一个数组
multiple Boolean false 设置后，允许选择多个选项（多选）
select-size Number 0 设置为大于 0 的数字时，将设置显示选项的行数。请注意，并非所有浏览器都将遵守此设置
aria-invalid Boolean or String false 为“aria-invalid”属性设置的可选值。支持的值为“true”和“false”。如果未设置，则“state”属性将指示该值

v-model

属性 事件
value input

插槽

插槽名称 描述
first 将选项或选项组放置在通过“options”属性提供的选项上方的位置

事件

事件 参数 描述
input
  1. value - 选择项的当前选择值。
 随着选择值的变化而发出
change
  1. value - 选择项的当前选择值。
 通过用户交互改变选择值发出

<b-form-select-option>

v2.2.0+ 功能组件
查看源代码

组件别名

<b-form-select-option> 也可以通过以下别名使用：

  • <b-select-option>

注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。

属性

属性 类型 默认值 描述
value Required Any 选项的值
disabled Boolean false 设置为“true”时，禁用组件的功能并将其置于禁用状态

<b-form-select-option-group>

v2.2.0+
查看源代码

组件别名

<b-form-select-option-group> 也可以通过以下别名使用：

  • <b-select-option-group>

注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。

属性

属性 类型 默认值 描述
options Array or Object [] 要在组件中渲染的项目数组
value-field String 'value' “options”数组中的字段名称，该字段名称应用于该值
text-field String 'text' “options”数组中应用于文本标签的字段名称
html-field String 'html' “options”数组中的字段名称，应该用于 html 标签而不是文本字段。请谨慎使用。
disabled-field String 'disabled' “options”数组中应用于禁用状态的字段名称
label Required String

插槽

插槽名称 描述
first 将选项放置在通过“options”属性提供的选项上方的位置

导入单个组件

您可以通过以下命名的导出将单个组件导入到项目中：

组件 命名输出 导入路径
<b-form-select> BFormSelect bootstrap-vue
<b-form-select-option> BFormSelectOption bootstrap-vue
<b-form-select-option-group> BFormSelectOptionGroup bootstrap-vue

示例：

import { BFormSelect } from 'bootstrap-vue'
Vue.component('b-form-select', BFormSelect)

导入为Vue.js插件

该插件包括上面列出的所有单个组件。插件还包括任何组件别名。

命名输出 导入路径
FormSelectPlugin bootstrap-vue

示例：

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