Skip to content

This is an optimized picklist for Vue that virtualizes the available options

License

Notifications You must be signed in to change notification settings

AllanOricil/vue-virtual-picklist

Repository files navigation

Buy Me A Coffee

Vue Virtual Picklist

It is a picklist that virtualizes its options to avoid mounting all of them in the DOM. Options are swaped depending on the position of the scrollbar.

Here you can find the documentation which has lots of examples.

Props

Prop name Description Type Values Default
caseInsensitive If enabled, the search is Case Insensitive. boolean - false
disabled if enabled, the picklist is disabled. boolean - false
enableSearch If enabled, an input is rendered and the user can type on it. boolean - false
hideSelected If enabled, the selected option is removed from the available options. boolean - false
noOptionsAvailableText It is the text shown when the search returns no options. string - "no options found"
optionHeight It determines the Height of each option. It is not necessary to set it. It is used by vue-virtualized-list to control the virtualization. number - 30
options These are the options available to be selected. Each object in the array must have the "value" and "label" keys. These objects can also have other keys, which will also be emited by the input and select events. array -
placeholder It is the placeholder for when there are options to select but none were picked. string - "select an option"
searchInputPlaceholder It is the placeholder for the search input. It has to be combined with the enable-search property. string - "type to filter available options"
searchKey It is the key used to filter the objects you passed on options property. It defaults to value, but you can choose other key from the objects you passed. string - "value"
value Stores the object which is used to determine the selected option. This object must be in the following format:
{ "value" : "a", "label" : "a", "index": 0 }
object -
visibleOptions It controls the number of visible options. number - 5

Events

Event name Properties Description
show-options dispatched when options are hidden.
select option object - object containing value, label, index, and originalListIndex dispatched after selecting an option. This can be used when you use value, instead of v-model.
input option object - object containing value, label, index, and originalListIndex dispatched after selecting an option. This is used for v-model.

Slots

Name Description Bindings
selected-option used to control how the selected option is rendered. option object - it contains value, label, index, and originalListIndex
placeholder used to control how the picklist's placeholder is rendered.
dropdown-icon used to override the dropdown icon. It can be any image and you can style it on the parent component.
option used to control how each option from the list of options is rendered. option object - it is an object containing value, label, index, and originalListIndex
no-options used to control how the message when the filter returns 0 results is displayed. text string - it has the value you passed on the noOptionsAvailableText property

About

This is an optimized picklist for Vue that virtualizes the available options

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published