Loading repository data…
riophae / repository
A multi-select component with nested options support for Vue.js
A multi-select component with nested options support for Vue.js
Requires Vue 2.2+
It's recommended to install vue-treeselect via npm, and build your app using a bundler like webpack.
npm install --save @riophae/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 '@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',
} ],
}
},
}
</script>
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>
<head>
<!-- include Vue 2.x -->
<script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
<!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
<script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
</head>
<body>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</body>
<script>
// 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',
} ],
},
})
</script>
</html>
Note: please use a desktop browser since the website hasn't been optimized for mobile devices.
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.
You can use this pen to reproduce bugs and then open an issue.
yarn or npm installnpm run dev & hacknpm test passesThis project is inspired by vue-multiselect, react-select and Ant Design. Special thanks go to their respective authors!
Some icons used in this project:
Copyright (c) 2017-present Riophae Lee.
Released under the MIT License.
Selected from shared topics, language and repository description—not editorial ratings.
ibnujakaria /
A simple javascript library for multiple select component that supports Bootstrap 4 natively.
prutya /
A guide on implementing an uncontrolled Multi-Select Dropdown component with React and Tailwind CSS. The component is going to remain functional even when JavaScript is disabled on the client.
Senpai-Gab /
Neo Select is a modern JavaScript library designed for customizable single-select and multi-select dropdowns with built-in search functionality. It features a clean, responsive, and user-friendly design that helps developers create smooth and interactive selection components for any web application.
ehsanbahramidev /
🚀 A reusable multi-select dropdown React.js component
Ganapathyram-Nandhagopal /
A modern, animated multi-select dropdown component built with HTML, CSS/SCSS, JavaScript, and jQuery.
bhargav-sarvaria /
Custom Dropdown component for a React Application with support for search and multi-select options.