vue-treeselect
A multi-select component with nested options support for Vue.js;
Forked from Vue-treeselect
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)
Requires Vue 2.2+
Getting Started
It's recommended to install vue-treeselect via npm, and build your app using a bundler like webpack.
npm install --save @fishtank/vue-treeselect
This example shows how to integrate the fishtank vue-treeselect with your Vue SFCs.
<!-- Vue SFC -->
<template>
<div id="app">
<FishtankTreeSelect
:options="options"
:max-height="null"
:hide-control="true"
:dropdownpopover="false"
:multiple="true"
:collapse-menu-padding="true"
v-model="value" />
</div>
</template>
<script>
// import the component
import FishtankTreeSelect from '@fishtank/vue-treeselect'
// import the styles
import '@fishtank/vue-treeselect/dist/vue-treeselect.css'
export default {
// register the component
components: { Treeselect },
data() {
return {
// define 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>
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 to reproduce bugs and then open an issue.
Contributing
- Fork & clone the repo
- Install dependencies by
yarn or npm install
- Check out a new branch
npm run dev & hack- Make sure
npm test passes
- Push your changes & file a pull request
Credits
This project is inspired by vue-multiselect, react-select and Ant Design. Special thanks go to their respective authors!
Some icons used in this project:
License
Copyright (c) 2017-present Riophae Lee.
Released under the MIT License.
