Multi-level Dropdown Component – Cascader Select

Cascader Select is a dynamic select box enhancement component that allows the user to select options from a multi-level cascading dropdown component.

Install & Download:

# Yarn
$ yarn add [email protected]

# NPM
$ npm install [email protected] --save

How to use it:

1. Install and import the library.

import Vue from 'vue';
import VueCascaderSelect from 'vue-cascader-select';

2. Register the 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>

4. Define your hierarchical options for the cascading dropdown.

[
  {
    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' },
    ],
  },
];

5. All default props.

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

Download Details:

Author: NeoCoast

Live Demo: https://neocoast.github.io/vue-cascader-select/

GitHub: https://github.com/NeoCoast/vue-cascader-select

#vuejs #javascript #vue-js