Select

The Select component can be used inline with the Option or OptionGroup components.

Examples

Size variants

Available ui prop values: xs / s / m / l.

<template>
<article>
  <veui-select
    v-model="license"
    class="select"
    ui="l"
    :options="options"
  />
  <veui-select
    v-model="license"
    class="select"
    :options="options"
  />
  <veui-select
    v-model="license"
    class="select"
    ui="s"
    :options="options"
  />
  <veui-select
    v-model="license"
    class="select"
    ui="xs"
    :options="options"
  />
</article>
</template>

<script>
import { Select } from 'veui'

export default {
  components: {
    'veui-select': Select
  },
  data () {
    return {
      license: null,
      options: [
        {
          label: 'MIT',
          value: 'mit'
        },
        {
          label: 'BSD',
          value: 'bsd'
        },
        {
          label: 'Apache 2.0',
          value: 'apache2'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.select {
  max-width: 120px;
  margin-right: 10px;
}
</style>

Inline options

Use the OptionGroup and Option components inside the Select component to replace the options prop.

Selected: -

clearable can be used to allow selected values to be discarded for Select. Set position of the inline OptionGroups to popup to display children options inside a popup menu.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-select
    v-model="item"
    class="select"
    placeholder="Pick one..."
    clearable
  >
    <veui-option-group
      label="Editors"
      position="popup"
    >
      <veui-option
        value="vscode"
        label="VSCode"
      />
      <veui-option
        value="sublime"
        label="SublimeText"
      />
      <veui-option
        value="atom"
        label="Atom"
      />
    </veui-option-group>
    <veui-option-group
      label="Browsers"
      position="popup"
    >
      <veui-option-group
        label="Desktop"
        position="popup"
      >
        <veui-option
          value="ie"
          label="IE"
        />
        <veui-option
          value="edge"
          label="Edge"
        />
        <veui-option
          value="firefox"
          label="Firefox"
        />
        <veui-option
          value="chrome"
          label="Chrome"
        />
      </veui-option-group>
      <veui-option-group
        label="Mobile"
        position="popup"
      >
        <veui-option
          value="ios_safari"
          label="iOS Safari"
        />
        <veui-option
          value="android"
          label="Android Browser"
        />
        <veui-option
          value="android_chrome"
          label="Chrome for Android"
        />
      </veui-option-group>
    </veui-option-group>
  </veui-select>
  <p>Selected: {{ item || '-' }}</p>
</article>
</template>

<script>
import { Select, OptionGroup, Option } from 'veui'

export default {
  components: {
    'veui-select': Select,
    'veui-option-group': OptionGroup,
    'veui-option': Option
  },
  data () {
    return {
      item: null
    }
  }
}
</script>

<style lang="less" scoped>
.select {
  width: 180px;
}
</style>

Searchable

Use the searchable prop to enable option search.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-select
    v-model="license"
    :options="options"
    searchable
  />
</article>
</template>

<script>
import { Select } from 'veui'

export default {
  components: {
    'veui-select': Select
  },
  data () {
    return {
      license: null,
      options: [
        {
          label: 'MIT',
          value: 'mit'
        },
        {
          label: 'BSD',
          value: 'bsd'
        },
        {
          label: 'Apache 2.0',
          value: 'apache2'
        }
      ]
    }
  }
}
</script>

Multiple selection

Use the multiple prop to enable multiple selection mode.

Searchable

Use max to specify the max number of options that can be selected. The searchable prop can also be used here to make options searchable.

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="searchable">
      Searchable
    </veui-checkbox>
  </section>
  <section>
    <veui-select
      v-model="license"
      multiple
      :options="options"
      :max="5"
      :searchable="searchable"
    />
  </section>
</article>
</template>

<script>
import { Select, Checkbox } from 'veui'

export default {
  components: {
    'veui-select': Select,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      searchable: false,
      license: null,
      options: [
        {
          label: 'MIT',
          value: 'mit'
        },
        {
          label: 'BSD',
          value: 'bsd'
        },
        {
          label: 'Apache 2.0',
          value: 'apache2'
        },
        {
          label: 'GPL 3.0',
          value: 'gpl3'
        },
        {
          label: 'AGPL 3.0',
          value: 'agpl3'
        },
        {
          label: 'LGPL 2.1',
          value: 'lgpl2'
        },
        {
          label: 'MPL 2.0',
          value: 'mpl2'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

Custom selected display

Use the label slot to customize how selected options are displayed when the dropdown is closed.

Use the selected slot to customize how selected options are displayed, regardless of whether the dropdown is closed.

下拉关闭时省略显示已选项

始终省略显示已选项

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>下拉关闭时省略显示已选项</h4>
    <veui-select
      v-model="license"
      multiple
      :options="options"
    >
      <template
        #label="{ selected }"
      >{{ selected[0].label }}等{{ selected.length }}个{{ ' ' }}</template>
    </veui-select>
  </section>
  <section>
    <h4>始终省略显示已选项</h4>
    <veui-select
      v-model="license"
      multiple
      :options="options"
    >
      <template
        #selected="{ selected }"
      >{{ selected[0].label
      }}{{ selected.length > 1 ? `等${selected.length}个` : '' }}</template>
    </veui-select>
  </section>
</article>
</template>

<script>
import { Select } from 'veui'

export default {
  components: {
    'veui-select': Select
  },
  data () {
    return {
      searchable: false,
      license: null,
      options: [
        {
          label: 'MIT',
          value: 'mit'
        },
        {
          label: 'BSD',
          value: 'bsd'
        },
        {
          label: 'Apache 2.0',
          value: 'apache2'
        },
        {
          label: 'GPL 3.0',
          value: 'gpl3'
        },
        {
          label: 'AGPL 3.0',
          value: 'agpl3'
        },
        {
          label: 'LGPL 2.1',
          value: 'lgpl2'
        },
        {
          label: 'MPL 2.0',
          value: 'mpl2'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

API

Props

Name Type Default Description

ui

string

Predefined styles.

Value	Description
`xs`	Extra small size style.
`s`	Small size style.
`m`	Medium size style.
`l`	Large size style.

options

Array<Object>

The option list, with items of type {label, value, options, disabled, ...}.

Name	Type	Description
`label`	`string`	The text description of the option.
`value`	`*`	The value corresponding to the option.
`options`	`Array<Object>`	The array of child options for the option, with item types the same as the `options` prop array items.
`disabled`	`boolean`	Whether the option is disabled.

value

Array<*>|*

v-model

The selected value.

multiple boolean false Whether to allow multiple selection.

max number - The upper limit of items that can be selected in multiple selection mode.

placeholder string select.placeholder Placeholder text when nothing is selected.

clearable boolean false Whether the selected content can be cleared.

searchable boolean false Whether to allow option search.

show-select-all boolean false Whether to show the "Select All" option in multiple selection mode.

expanded

boolean

false

.sync

Whether the dropdown menu is expanded.

disabled boolean false Whether it is disabled.

readonly boolean false Whether it is read-only.

composition boolean false Whether to perceive the value of input method input in the search box.

overlay-class string | Array | Object - Refer to the overlay-class prop of the Overlay component.

overlay-style string | Array | Object - Refer to the overlay-style prop of the Overlay component.

match (item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]> - Supports custom highlight logic, case-insensitive by default, refer to Autocomplete.

filter (item, keyword, { ancestors, offsets }) => boolean - Supports custom search hit logic, refer to Autocomplete.

Slots

Name Description

default The content of the option list. When the options property is not specified, it can be used to directly inline Option or OptionGroup.

before

The content before the option list. No default content.

Name	Type	Description
`value`	`*`	The value of the selected option.
`select`	`function(value: *): void`	Used to switch the selected option.
`expanded`	`boolean`	Whether the dropdown menu is expanded.
`toggle`	`function(force?: boolean): void`	Used to toggle the dropdown menu expansion state.

after The content after the option list. No default content. Slot parameters are the same as the before slot.

label

The text area of the dropdown button.

Default content: The label property value of the selected option or the text content of the selected option in inline mode.

Name	Type	Description
`label`	`string`	The text of the selected option.
`value`	`*`	The value of the selected option.
`selected`	`boolean`	Whether a value has been selected.
`disabled`	`boolean`	Whether the option is disabled.

In addition, other properties in the current option data besides the above-described properties will also be automatically bound to the slot porps through v-bind.

group-label

The title text area of the dropdown option group (with options).

Default content: The label property value of the option.

Name	Type	Description
`label`	`string`	The title text of the option group.
`disabled`	`boolean`	Whether the option group is disabled.

In addition, other properties in the current option data besides the above-described properties will also be automatically bound to the slot porps through v-bind.

option-label

The text area of the dropdown option (without options).

Default content: The label property value of the option.

Name	Type	Description
`label`	`string`	The text of the option.
`value`	`*`	The value of the option.
`selected`	`boolean`	Whether the option is selected.
`disabled`	`boolean`	Whether the option is disabled.

In addition, other properties in the current option data besides the above-described properties will also be automatically bound to the slot porps through v-bind.

option

The entire area of the selectable dropdown option.

Default content: The default structure of the Option component.

Name	Type	Description
`label`	`string`	The text of the option.
`value`	`*`	The value of the option.
`selected`	`boolean`	Whether the option is selected.
`disabled`	`boolean`	Whether the option is disabled.

In addition, other properties in the current option data besides the above-described properties will also be automatically bound to the slot porps through v-bind.

trigger

The entire dropdown trigger area.

Default content: Dropdown button.

Name	Type	Description
`attrs`	`Object`	The attributes that need to be output to the trigger element, including `aria-*` / `disabled`, etc. You can use `v-bind="attrs"` to output them uniformly.
`handlers`	`Object`	The event listeners that need to be bound to the trigger element can be output uniformly using `v-on="handlers"`. The element used to bind `handlers` needs to support focus so that various keyboard interactions can still be triggered normally.
`value`	`*`	The value of the selected option.
`select`	`function(value: *): void`	Used to switch the selected option.
`expanded`	`boolean`	Whether the dropdown menu is expanded.
`toggle`	`function(force?: boolean): void`	Used to toggle the expansion state of the dropdown menu.

selected

The selected value rendering area.

Default content: The label of the selected item is rendered for single selection; for multiple selection, the label of each selected item is rendered as a Tag component.

Name	Type	Description
`label`	`string`	The option text.
`value`	`*`	The option value.
`selected`	`boolean`	Whether the option is selected.
`disabled`	`boolean`	Whether the option is disabled.

Name	Type	Description
`selected`	`Array<Object>`	An array of data for the selected items.

no-data Used to define the content to be displayed when there is no search data.

Events

Name	Description
`input`	Triggered when the search keyword is entered. The callback function takes `(value: string)` as the parameter, where `value` is the `value` of the input box.
`change`	`v-model` Triggered when the selection state changes. The callback function takes `(value: *)` as the parameter, where `value` is the value of the `value` field of the currently selected option.
`toggle`	Triggered when the drop-down menu's expanded state is toggled. The callback function takes `(expanded: boolean)` as the parameter. `expanded` indicates whether the operation will expand or collapse the drop-down menu.
`clear`	Triggered when the clear button is clicked.
`afteropen`	Triggered after the drop-down is opened.

Configs

Key	Type	Default	Description
`select.placeholder`	`string`	`@@select.placeholder`	Placeholder content when nothing is selected.

Values that start with @@ refer to properties in the language configuration.

Icons

Name	Description
`expand`	Expand the overlay.
`collapse`	Collapse the overlay.

CSS

Name	Type	Default	Description
`--dls-dropdown-max-display-items`	`<integer>`	`8`	The maximum number of items to be displayed in the drop-down menu at the same time. The maximum height of the drop-down box will be calculated based on this value. This needs to be set via the `overlay-style` prop.

Edit this page on GitHubEdit