Cascader Select is a dynamic select box enhancement component that allows the user to select options from a multi-level cascading dropdown component.
# Yarn
$ yarn add [email protected]
# NPM
$ npm install [email protected] --save
import Vue from 'vue';
import VueCascaderSelect from 'vue-cascader-select';
Vue.use(VueCascaderSelect);
// or
export default {
name: 'MyComponent',
components: {
VueCascaderSelect,
},
...
};
3. Insert the Cascader Select into your app template.
<template>
<vue-cascader-select
:options="options"
:onClear="(val) => value = ''"
:onSelect="(val) => value = val"
:value="value"
/>
</template>
[
{
label: 'JavaScript',
value: 'javascript',
disabled: true,
options: [
{ label: 'Vue', value: 'Vue' },
{ label: 'React', value: 'React' },
{ label: 'Angular', value: 'Angular' },
],
},
{
label: 'Backend',
value: 'Backend',
disabled: true,
options: [
{ label: 'Ruby on Rails', value: 'Ruby on Rails' },
{ label: 'NodeJS', value: 'NodeJS' },
{ label: 'Elixir', value: 'Elixir' },
],
},
];
placeholder: {
type: String,
default: 'Please select...',
},
options: {
type: Array,
required: true,
validator: value => validateOptions(value),
},
onClear: {
type: Function,
required: true,
},
onSelect: {
type: Function,
required: true,
},
value: {
type: String,
required: true,
}
Author: NeoCoast
Live Demo: https://neocoast.github.io/vue-cascader-select/
GitHub: https://github.com/NeoCoast/vue-cascader-select
#vuejs #javascript #vue-js