@imgelu/vue-treeselect v0.1.8
vue-treeselect
A multi-select component with nested options support for Vue 3.
Requires Vue 3.0+. For Vue 2.0, use the original library.
I've opened this repo because the Vue 3 repo by megafetis is archived, and no one can contribute. There may be several bugs, so feel free to send pull requests.
Breaking changes from the original library (Vue 2):
- property
value
=>modelValue
- event
input
=>updated:modelValue
- Now use slots with
<template>
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)
- RTL support
Getting Started
It's recommended to install vue-treeselect via npm, and build your app using a bundler like webpack.
npm install --save @imgelu/vue-treeselect
This example shows how to integrate vue-treeselect with your Vue SFCs.
<!-- Vue SFC -->
<template>
<div id="app">
<TreeSelect v-model="value" :multiple="true" :options="options" />
</div>
</template>
<script>
// import the component
import TreeSelect from 'vue-treeselect'
// import the styles
import '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',
} ],
}
},
}
</script>
CDN tutorial coming soon.
Documentation for Vue 2 & Live Demo. Be careful with breaking changes above (component name is now TreeSelect).
Note: please use a desktop browser since the website hasn't been optimized for mobile devices.
Browser Compatibility
- Chrome
- Edge
- Firefox
- 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 open an issue.
Contributing
- Fork & clone the repo
- Install dependencies by
yarn
ornpm install
- Check out a new branch
npm run dev
& hack- Push your changes & file a pull request
Credits
This project is inspired by vue-treeselect.
This project is a fork of the original Vue 3-compatible component, developed by megafetis.
Special thanks go to their respective authors!
Some icons used in this project:
- "link" icon made by Smashicons is licensed under CC 3.0 BY
- "spinner" icon from SpinKit is licensed under the MIT License
- "caret" icon made by Dave Gandy is licensed under CC 3.0 BY
- "delete" icon made by Freepik is licensed under CC 3.0 BY
- "checkmark symbol" & "minus symbol" icons made by Catalin Fertu are licensed under CC 3.0 BY
License
Released under the MIT License.