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: 26 days ago
JSON representation
A multi-select component with nested options support for Vue.js
- Host: GitHub
- URL: https://github.com/riophae/vue-treeselect
- Owner: riophae
- License: mit
- Created: 2017-10-03T12:22:10.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-02-13T00:10:52.000Z (9 months ago)
- Last Synced: 2024-10-13T03:32:10.441Z (28 days ago)
- Topics: component, dropdown, javascript, select, tree, vue
- Language: JavaScript
- Homepage: https://vue-treeselect.js.org/
- Size: 2.34 MB
- Stars: 2,894
- Watchers: 45
- Forks: 506
- Open Issues: 321
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-treeselect
[](https://www.npmjs.com/package/@riophae/vue-treeselect) [](https://circleci.com/gh/riophae/vue-treeselect/tree/master) [](https://codecov.io/gh/riophae/vue-treeselect?branch=master)
 [](https://snyk.io/test/npm/@riophae/vue-treeselect) 
> A multi-select component with nested options support for Vue.js
### 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).