表单选择

Bootstrap 自定义 <select> 使用自定义样式。可以选择根据数组、对象数组或对象指定选项。

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

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

<!-- b-form-select-options.vue -->

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

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

<!-- b-form-select-options.vue -->

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

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

<!-- b-form-select-manual.vue -->

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

<template>
  <div>
    <b-form-select v-model="selected" :options="options" class="mb-3">
      <!-- This slot appears above the options from 'options' prop -->
      <template #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>

<!-- b-form-select-both.vue -->

选项属性

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

value 将在 v-model 上设置的选定值
disabled 禁用选项以供选择
text 显示文本，或 html 显示基本内联 html

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

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

请谨慎将用户提供的内容放置在 html 字段中，因为它可能会使你容易受到 XSS 攻击的攻击，如果你没有首先消毒用户提供字符串。

选项作为数组

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

如果数组项是字符串，它将同时用于生成的 value 和 text 字段。

你可以在数组中混合使用字符串和对象。

在内部，BootstrapVue 会将上述数组转换为以下数组（对象数组）格式

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 属性。

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 将把上述对象转换为以下数组（对象数组）格式

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 属性为包含你想要使用的属性名称的字符串来轻松更改它们

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

<!-- b-form-select-options-fields.vue -->

选项注释

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

<b-form-select v-model="selected" :options="options">
  <template #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。

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

<!-- b-form-select-single.vue -->

选择大小（显示的行）

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

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

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

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

<!-- b-form-select-size.vue -->

支持多选

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

多选模式中的值

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

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

<!-- b-form-select-multiple-mode.vue -->

控制大小

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

默认情况下，<b-form-select> 将占据其所在的容器的全部宽度。要控制选择宽度，请将输入放在标准 Bootstrap 网格列中。

自动对焦

当 autofocus 属性在 <b-form-select> 上设置时，当选择插入（即挂载）到文档中或在 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> prop aria-invalid 设置为 true。

支持的 invalid 值是

false（默认）未检测到错误
true 该值未通过验证。

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

非自定义选择

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

对于非 multiple 选择，如果 select-size prop 设置为大于 1 的值，则始终会呈现一个 plain 选择。

组件参考

`<b-form-select>`

查看源代码

<b-form-select> 组件别名
<b-form-select> 属性
<b-form-select> v-model
<b-form-select> 插槽
<b-form-select> 事件

组件别名

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

<b-select>

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

属性

所有属性默认值都全局可配置。

属性 (单击按升序排序)	类型 (单击按升序排序)	默认值	说明
`aria-invalid`	`Boolean` 或 `String`	`false`	为“aria-invalid”属性设置的可选值。支持的值为“true”和“false”。如果未设置，则“state”属性将决定该值
`autofocus`	`布尔值`	`false`	当设置为 `true` 时，尝试在控件挂载时自动聚焦，或在保持活动状态时重新激活。不会在控件上设置 `autofocus` 属性
`disabled`	`布尔值`	`false`	当设置为 `true` 时，禁用组件的功能并将其置于禁用状态
`disabled-field`	`字符串`	`'disabled'`	应在 `options` 数组中用于禁用状态的字段名称
`form`	`字符串`		表单控件所属的表单的 ID。在控件上设置 `form` 属性
`html-field` 谨慎使用	`字符串`	`'html'`	应在 `options` 数组中用于 html 标签而不是文本字段的字段名称
`id`	`字符串`		用于在呈现的内容上设置 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
`label-field`	`字符串`	`'label'`	从选项对象中用于获取标签的键
`multiple`	`布尔值`	`false`	设置后，允许选择多个选项（多选）
`name`	`字符串`		设置表单控件上 `name` 属性的值
`options`	`Array` 或 `Object`	`[]`	要在组件中呈现的项数组
`options-field`	`字符串`	`'options'`	从选项对象中用于获取选项的键
`plain`	`布尔值`	`false`	以普通模式渲染表单控件，而不是自定义样式模式
`required`	`布尔值`	`false`	将 `required` 属性添加到表单控件
`select-size`	`数字`	`0`	当设置为大于 0 的数字时，将设置显示选项行的数量。请注意，并非所有浏览器都将遵循此设置
`size`	`字符串`		设置组件外观的大小。'sm'、'md'（默认）或 'lg'
`state`	`布尔值`	`null`	控制组件的验证状态外观。`true` 表示有效，`false` 表示无效，或 `null` 表示没有验证状态
`text-field`	`字符串`	`'text'`	`options` 数组中应用于文本标签的字段名称
`value` v-model	`任意`		select 的当前值。当设置 'multiple' 属性时，应将其设置为数组
`value-field`	`字符串`	`'value'`	`options` 数组中应用于值字段的字段名称

注意：支持 HTML 字符串的属性 (*-html) 在传递原始用户提供的值时，容易受到跨站脚本 (XSS) 攻击。您必须先正确清除用户输入！

`v-model`

属性	事件
`value`	`input`

插槽

名称	说明
`default`	放置在表单 select 中的内容
`first`	放置选项或选项组的插槽，位于通过 'options' 属性提供的选项上方

事件

事件	参数	说明
`change`	`value` - select 的当前选定值	当 select 值通过用户交互发生更改时发出
`input`	`value` - select 的当前选定值	当 select 值发生更改时发出

`<b-form-select-option>`

v2.2.0+ 函数组件

查看源代码

<b-form-select-option> 组件别名
<b-form-select-option> 属性
<b-form-select-option> 插槽

组件别名

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

<b-select-option>

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

属性

所有属性默认值都全局可配置。

属性	类型	默认值	说明
`disabled`	`布尔值`	`false`	当设置为 `true` 时，禁用组件的功能并将其置于禁用状态
`value` 必需	`任意`		选项的值

插槽

名称	说明
`default`	要放置在表单选择选项中的内容

`<b-form-select-option-group>`

v2.2.0+

查看源代码

<b-form-select-option-group> 组件别名
<b-form-select-option-group> 属性
<b-form-select-option-group> 插槽

组件别名

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

<b-select-option-group>

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

属性

所有属性默认值都全局可配置。

属性	类型	默认值	说明
`disabled-field`	`字符串`	`'disabled'`	应在 `options` 数组中用于禁用状态的字段名称
`html-field` 谨慎使用	`字符串`	`'html'`	应在 `options` 数组中用于 html 标签而不是文本字段的字段名称
`label` 必需	`字符串`		选项组的标签
`options`	`Array` 或 `Object`	`[]`	要在组件中呈现的项数组
`text-field`	`字符串`	`'text'`	`options` 数组中应用于文本标签的字段名称
`value-field`	`字符串`	`'value'`	`options` 数组中应用于值字段的字段名称

注意：支持 HTML 字符串的属性 (*-html) 在传递原始用户提供的值时，容易受到跨站脚本 (XSS) 攻击。您必须先正确清除用户输入！

插槽

名称	说明
`default`	要放置在表单选择选项组中的内容
`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)

选项属性

选项作为数组

选项作为对象数组

选项作为对象

更改选项字段名称

选项注释

标准（单选）选择

单选模式中的值

选择大小（显示的行）

支持多选

多选模式中的值

控制大小

自动对焦

上下文状态

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

ARIA aria-invalid 属性：

非自定义选择

组件参考

组件别名

属性

v-model

插槽

事件

组件别名

属性

插槽

组件别名

属性

插槽

导入单个组件

作为 Vue.js 插件导入

ARIA `aria-invalid` 属性：

`v-model`