Vue.js Multi-select Tree Component

vue-treeselect

If you are dealing with lists of data which might have multiple levels, you could use a tree-like selection component. vue-treeselect is a multi-select component with nested options, Vuex support and more.

Features:

vue-treeselect is a multi-select component with nested options for Vue.js, featuring:

  • Single select
  • Multiple select
  • Fuzzy searching
  • Delayed loading (load data of deep level options only when needed)
  • Keyboard support
  • Vuex support
  • Rich options & highly customizable
  • Supports a wide range of browsers
  • 95% test coverage

Example

Requires Vue 2.2+

Installation Install vue-treeselect using npm:

$ npm install --save @riophae/vue-treeselect

Or via yarn:


$ yarn add @riophae/vue-treeselect

The library will be exposed as window.VueTreeselect.Treeselect. Note that, Vue as a dependency should be included before vue-treeselect.

This example is utilizing the most common features of vue-treeselect:

*.vue file

<template>
<div>
    <treeselect
    :multiple="multiple"
    :clearable="clearable"
    :searchable="searchable"
    :open-on-click="openOnClick"
    :clear-on-select="clearOnSelect"
    :options="options"
    :limit="5"
    :max-height="300"
    />
</div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'

export default {
  components: { Treeselect },
  name: 'HelloWorld',
  data () {
    return {
      multiple: true,
      clearable: true,
      searchable: true,
      openOnClick: true,
      clearOnSelect: true,
      options: [ {
        id: 'bikes',
        label: 'Bikes',
        children: [ 
                // // array of bike objs
                ],
      }, {
        id: 'Cars',
        label: 'Cars',
        children: [
                // array of car objs
                ],
      } ],
    }
  }
}
</script>

<style src="@riophae/vue-treeselect/dist/vue-treeselect.min.css"></style>

Searchable, clearable, and most importantly multiselectable

For more options please refer to the documentation.

If you are interested for more or you have any bugs and suggestions, click here. That's it! This project is inspired by vue-multiselect, react-select and Ant Design.