Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/riophae/vue-treeselect

A multi-select component with nested options support for Vue.js
https://github.com/riophae/vue-treeselect

component dropdown javascript select tree vue

Last synced: 2 months ago
JSON representation

A multi-select component with nested options support for Vue.js

Lists

README 

        
# vue-treeselect

[![npm](https://badgen.now.sh/npm/v/@riophae/vue-treeselect)](https://www.npmjs.com/package/@riophae/vue-treeselect) [![Build](https://badgen.now.sh/circleci/github/riophae/vue-treeselect)](https://circleci.com/gh/riophae/vue-treeselect/tree/master) [![Coverage](https://badgen.net/codecov/c/github/riophae/vue-treeselect)](https://codecov.io/gh/riophae/vue-treeselect?branch=master)

![npm monthly downloads](https://badgen.now.sh/npm/dm/@riophae/vue-treeselect)

![jsDelivr monthly hits](https://badgen.net/jsdelivr/hits/npm/@riophae/vue-treeselect) [![Known vulnerabilities](https://snyk.io/test/npm/@riophae/vue-treeselect/badge.svg)](https://snyk.io/test/npm/@riophae/vue-treeselect) ![License](https://badgen.net/github/license/riophae/vue-treeselect)



> A multi-select component with nested options support for Vue.js



![Vue-Treeselect Screenshot](https://raw.githubusercontent.com/riophae/vue-treeselect/master/screenshot.png)



### Features



- Single & multiple select with nested options support

- Fuzzy matching

- Async searching

- Delayed loading (load data of deep level options only when needed)

- Keyboard support (navigate using Arrow Up & Arrow Down keys, select option using Enter key, etc.)

- Rich options & highly customizable

- Supports a wide range of browsers (see [below](#browser-compatibility))

- RTL support



*Requires Vue 2.2+*



### Getting Started



It's recommended to install vue-treeselect via npm, and build your app using a bundler like [webpack](https://webpack.js.org/).



```bash

npm install --save @riophae/vue-treeselect

```



This example shows how to integrate vue-treeselect with your [Vue SFCs](https://vuejs.org/v2/guide/single-file-components.html).



```vue



  


    

  



  // import the component

  import Treeselect from '@riophae/vue-treeselect'

  // import the styles

  import '@riophae/vue-treeselect/dist/vue-treeselect.css'



  export default {

    // register the component

    components: { Treeselect },

    data() {

      return {

        // define the default value

        value: null,

        // define options

        options: [ {

          id: 'a',

          label: 'a',

          children: [ {

            id: 'aa',

            label: 'aa',

          }, {

            id: 'ab',

            label: 'ab',

          } ],

        }, {

          id: 'b',

          label: 'b',

        }, {

          id: 'c',

          label: 'c',

        } ],

      }

    },

  }



```



If you just don't want to use webpack or any other bundlers, you can simply include the standalone UMD build in your page. In this way, make sure Vue as a dependency is included before vue-treeselect.



```html



  

    

    

    

    

    

  

  

    


      

    


  

  

    // register the component

    Vue.component('treeselect', VueTreeselect.Treeselect)



    new Vue({

      el: '#app',

      data: {

        // define the default value

        value: null,

        // define options

        options: [ {

          id: 'a',

          label: 'a',

          children: [ {

            id: 'aa',

            label: 'aa',

          }, {

            id: 'ab',

            label: 'ab',

          } ],

        }, {

          id: 'b',

          label: 'b',

        }, {

          id: 'c',

          label: 'c',

        } ],

      },

    })

  



```



### Documentation & Live Demo



[Visit the website](https://vue-treeselect.js.org/)



Note: please use a desktop browser since the website hasn't been optimized for mobile devices.



### Browser Compatibility



- Chrome

- Edge

- Firefox

- IE ≥ 9

- Safari



It should function well on IE9, but the style can be slightly broken due to the lack of support of some relatively new CSS features, such as `transition` and `animation`. Nevertheless it should look 90% same as on modern browsers.



### Bugs



You can use this [pen](https://codepen.io/riophae/pen/MExgzP) to reproduce bugs and then [open an issue](https://github.com/riophae/vue-treeselect/issues/new).



### Contributing



1. Fork & clone the repo

2. Install dependencies by `yarn` or `npm install`

3. Check out a new branch

4. `npm run dev` & hack

5. Make sure `npm test` passes

6. Push your changes & file a pull request



### Credits



This project is inspired by [vue-multiselect](https://github.com/monterail/vue-multiselect), [react-select](https://github.com/JedWatson/react-select) and [Ant Design](https://github.com/ant-design/ant-design/). Special thanks go to their respective authors!



Some icons used in this project:



  - "link" icon made by [Smashicons](https://www.flaticon.com/authors/smashicons) is licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)

  - "spinner" icon from [SpinKit](https://github.com/tobiasahlin/SpinKit) is licensed under the [MIT License](https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE)

  - "caret" icon made by [Dave Gandy](https://www.flaticon.com/authors/dave-gandy) is licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)

  - "delete" icon made by [Freepik](https://www.flaticon.com/authors/freepik) is licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)

  - "checkmark symbol" & "minus symbol" icons made by [Catalin Fertu](https://www.flaticon.com/authors/catalin-fertu) are licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)



### License



Copyright (c) 2017-present [Riophae Lee](https://github.com/riophae).



Released under the [MIT License](https://github.com/riophae/vue-treeselect/blob/master/LICENSE).