MultiSelect
MultiSelect [Pro] component
- creates a selectable list of options, to collect user input
Usage
<template>
<CRow>
<CCol>
<CMultiSelect
:multiple="true"
:search="true"
:selected="['1']"
:selection="true"
optionsEmptyPlaceholder="No options placeholder"
searchPlaceholder="..."
>
<option value="0">enhancement</option>
<option value="1">bug</option>
<option value="2">duplicate</option>
<option value="3">invalid</option>
<optgroup label="group">
<option value="4">enhancement2</option>
<option value="5">bug2</option>
</optgroup>
</CMultiSelect>
</CCol>
<CCol>
<CMultiSelect
:options="options"
:search="true"
:selected="[]"
:selection="true"
inline
optionsEmptyPlaceholder="No options placeholder"
searchPlaceholder="Search"
selectionType="tags"
>
</CMultiSelect>
</CCol>
</CRow>
</template>
<script>
export default {
name: "MultiSelectExample",
data() {
return {
selected: [
'1',
],
options: [
{
value: 0,
text: 'enhancement'
},
{
value: 1,
text: 'bug',
},
{
value: 2,
text: 'duplicate',
},
{
value: 3,
text: 'invalid'
},
{
label: 'group',
options: [
{
value: 4,
text: 'enhancement2'
},
{
value: 5,
text: 'bug2'
}
]
}
],
}
},
}
</script>
enhancement
bug
duplicate
invalid
Features
- Single / Multiple select
- Dropdown / Inline
- Search / Filter
- Counter / Tags / Text
CMultiSelect API
Name | Default | Type |
|---|
|
inline
|
false
|
Boolean
|
Defines if component renders as inline or with dropdown.
|
|
multiple
|
true
|
Boolean
|
Multiple options can be selected at once.
|
|
options
|
undefined
|
Array
|
Config array for rendering option and optgroup elements
|
|
optionsEmptyPlaceholder
|
no items
|
String
|
Placeholder for no options items
|
|
search
|
false
|
Boolean
|
Show search input
|
|
searchPlaceholder
|
Select...
|
String
|
Toggles search input
|
|
selection
|
true
|
Boolean
|
Renders selected items list
|
|
selectionType
|
counter
|
String
|
List type of selected items: [counter | tags | text ]
|
|
selectionTypeCounterText
|
item(s) selected
|
String
|
Default text for counter type
|
|
selected
|
|
Array
|
Selected values
|
|
name
|
|
String
|
Defines a name for the select list. Needed to reference the form data
|
|
form
|
|
String
|
Defines which form the select drop-down list belongs to
|
Name | Fallback Content |
|---|
|
default
|
undefined
|
Options for select if there is no config array defined
|
Name | Value |
|---|
|
update
|
(event)
|
option item selected
|
