Lightweight Multi/Single Select Component For Vue.js

Install & Download:

# Yarn
$ yarn add vue-multi-select
# NPM
$ npm install vue-multi-select --save

Description:

Vue multi-select is a lightweight, advanced multi/single select component for modern Vue.js development.

Basic usage:

1. Import the component & stylesheet.

import vueMultiSelect from 'vue-multi-select';
import 'vue-multi-select/dist/lib/vue-multi-select.css';

2. Create a basic single select component.

<template>
  <div>
    <vue-multi-select
      ref="multiSelect"
      v-model="values"
      search
      historyButton
      :options="options"
      :filters="filters"
      :btnLabel="btnLabel"
      @open="open"
      @close="close"
      :selectOptions="data">
      <template v-slot:option="{option}">
        <input type="checkbox" :checked="option.selected"/>
        <span>{{option.name}}</span>
      </template>
    </vue-multi-select>
    <button
      @click="openManually">
      Open manually
    </button>
  </div>
</template>

export default {
  data() {
    return {
      btnLabel: values => `A simple vue multi select (${values.length})`
      name: 'first group',
      values: [],
      data: [{
        name: 'first group',
        list: [
          { name: '0' },
          { name: '2' },
          { name: '3' },
          { name: '8' },
          { name: '9' },
          { name: '11' },
          { name: '13' },
          { name: '14' },
          { name: '15' },
          { name: '18' },
        ],
      }, {
        name: 'second group',
        list: [
          { name: '21' },
          { name: '22' },
          { name: '24' },
          { name: '27' },
          { name: '28' },
          { name: '29' },
          { name: '31' },
          { name: '33' },
          { name: '35' },
          { name: '39' },
        ],
      }],
      filters: [{
        nameAll: 'Select all',
        nameNotAll: 'Deselect all',
        func() {
          return true;
        },
      }, {
        nameAll: 'select <= 10',
        nameNotAll: 'Deselect <= 10',
        func(elem) {
          return elem.name <= 10;
        },
      }, {
        nameAll: 'Select contains 2',
        nameNotAll: 'Deselect contains 2',
        func(elem) {
          return elem.name.indexOf('2') !== -1;
        },
      }],
      options: {
        multi: true,
        groups: true,
      },
    };
  },
  methods: {
    openManually() {
      this.$refs.multiSelect.openMultiSelect();
    },
    open() {
      console.log('open');
    },
    close() {
      console.log('close');
    },
  },
  components: {
    vueMultiSelect,
  },
};

3. Create a basic multi select component.

<template>
  <div>
    <vue-multi-select
      v-model="values"
      search
      historyButton
      :filters="filters"
      :options="options"
      :selectOptions="data"/>
      <button
        @click="reloadFunction" >
        Change v-model
      </button>
  </div>
</template>

export default {
  data() {
    return {
      name: 'first group',
      values: [
        { label: '2' },
        { label: '3' },
      ],
      data: [{
        title: 'part one',
        elements: [
          { label: '0', disabled: true },
          { label: '2' },
          { label: '3' },
          { label: '8' },
          { label: '9' },
          { label: '11' },
          { label: '13' },
          { label: '14' },
          { label: '15' },
          { label: '18' },
        ],
      }, {
        title: 'part two',
        elements: [
          { label: '23' },
          { label: '25' },
          { label: '31' },
          { label: '42' },
          { label: '56' },
          { label: '76' },
          { label: '82' },
          { label: '42' },
          { label: '13' },
          { label: '21' },
        ],
      }],
      filters: [{
        nameAll: 'Select all',
        nameNotAll: 'Deselect all',
        func() {
          return true;
        },
      }],
      options: {
        multi: true,
        groups: true,
        labelName: 'label',
        labelList: 'elements',
        groupName: 'title',
        cssSelected: option => (option.selected ? { 'background-color': '#5764c6' } : ''),
      },
    };
  },
  methods: {
    reloadFunction() {
      this.values = [
        { label: '2' },
        { label: '3' },
      ];
    },
  },
  components: {
    vueMultiSelect,
  },
};

4. All possible props.

options: {
  type: Object,
  default: () => ({}),
},
filters: {
  type: Array,
  default: () => [],
},
selectOptions: {
  type: Array,
  default: () => [],
},
eventName: {
  type: String,
  default: 'selectionChanged',
},
reloadInit: {
  type: Boolean,
  default: false,
},
value: {
  type: Array,
  default: () => ([]),
},
btnClass: {
  type: String,
  default: '',
},
popoverClass: {
  type: String,
  default: '',
},
btnLabel: {
  type: Function,
  default: () => ('multi-select'),
},
search: {
  type: Boolean,
  default: false,
},
searchPlaceholder: {
  type: String,
  default: 'Search...',
},
historyButton: {
  type: Boolean,
  default: false,
},
historyButtonText: {
  type: String,
  default: '↶',
},
position: {
  type: String,
  default: 'bottom-left',
},
disabled: {
  type: Boolean,
  default: false,
},
disabledUnSelect: {
  type: Boolean,
  default: false,
},