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

Overview

vue-treeselect

npm Build Coverage npm monthly downloads jsDelivr monthly hits Known vulnerabilities License

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

Vue-Treeselect Screenshot

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

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 @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/[email protected]^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/[email protected]^0.4.0/dist/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/[email protected]^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>

Documentation & Live Demo

Visit the website

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 to reproduce bugs and then open an issue.

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, 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.

Comments
  • 版本更新到0.0.12,問題還是沒有解決

    版本更新到0.0.12,問題還是沒有解決

    @riophae 您好: 我遇到的第一個問題是,單選的下拉選單會出現unknow的預設文字,然後按旁邊的叉叉,才會變成我placeholder預設的文字,我有看您給別人的回答是更新後就可以了,但我的還是在 q1 q2 我遇到的第二個問題是,我用延遲加載後,想要預設default,所以塞值在v-model裡面,用console看,值有進去,可是在網頁上看還是沒有,一訂要點擊下拉選單,才會出現預設的選項,沒辦法直接顯示 以上兩個問題,請您幫忙解答,非常感謝!

    Type: Question 
    opened by s1041613 31
  • Excuse me, why I had use $.ajax to get options, but `vue-treeselect` not work.

    Excuse me, why I had use $.ajax to get options, but `vue-treeselect` not work.

    I had use $.ajax to get some result, and bind with :option. But vue-treeselect show me "no options avaliable". my result's format fits your rules.

    Type: Question Type: Discussion 
    opened by zgj233 17
  • Wrong item selected as value

    Wrong item selected as value

    Hello,

    In the following pen : https://codepen.io/anon/pen/KBgzwV I have a tree with a parent with a child and a grandchild. When I click on the grandchild:

    • The parent, child and grandchild are selected as expected,
    • The selected value is the child and not the grand child.

    Is-it a configuration problem?

    Thank you,

    Karel

    Type: Feature Request 
    opened by shaffe-fr 15
  • Can we have the node items to be single select and leaf items to be multi-select?

    Can we have the node items to be single select and leaf items to be multi-select?

    Hi,

    I have a requirement where I want to have the user to select only one of the tree (parent) nodes but one or more of the child nodes.

    • Node
      • [x] Leaf 1
      • [x] Leaf 2
      • [x] Leaf 3

    Is it possible by any way?

    opened by kishankarun 11
  • Question: passing/retrieve additional elements other than

    Question: passing/retrieve additional elements other than" id" and "label"

    say the sever passing me an array of objs like this. [ {"id":"1","label":"car", "price":"xyz", "desc":"sth sth sth"}, {"id":"2","label":"bike", "price":"aa", "desc":"blah blah blah"} ]

    How can I display respective price and desc info while the user selected the label from the drop down. thanks!

    Type: Question 
    opened by topegret 10
  • Error in v-on handler:

    Error in v-on handler: "TypeError: Cannot read property '$refs' of undefined"

    Hi, thanks for component!

    I have error, I don't know why.

    My code:

    <transition name="fade">
      <span
        v-if="showSelect"
        class="tag-select-tooltip"
        :style="tooltipStyles"
      >
        <treeselect
          :options="smartTags"
          disable-branch-nodes
          search-nested
          always-open
          show-count
          auto-focus
          @input="onSmartTagsSelectOnSelect"
        />
      </span>
    </transition>
    

    image

    In this place:

    image var isClickedOnValueContainer = this.getValueContainer().$el.contains(evt.target); image

    Everything works fine, despite the error.

    opened by iliyaZelenko 9
  • noChildrenText noOptionsText no can use

    noChildrenText noOptionsText no can use

    I want to replace the default text,but it doesnt work.

                            loadingText="记载中"
                            noChildrenText="到头了"
                            noOptionsText="到头了"
    
    Type: Question 
    opened by laosandegudai 9
  • Consider adding package.lock

    Consider adding package.lock

    Documentation from npm : https://docs.npmjs.com/files/package-lock.json

    I wanted to contriboot to this repository. I can't because after a fresh git clone, npm i and npm run dev I get :

     ~/contriboots/vue-treeselect > npm run dev
    
    > @riophae/[email protected] dev /Users/ireadyouremails/contriboots/vue-treeselect
    > node build/dev-server.js
    
    /Users/ireadyouremails/contriboots/vue-treeselect/node_modules/pug-loader/index.js:155
          throw e;
          ^
    
    Error: /Users/ireadyouremails/contriboots/vue-treeselect/docs/partials/guides.pug:37:5
    
    true is not constant. All filters are rendered compile-time so filter options must be constants.
        at makeError (/Users/ireadyouremails/contriboots/vue-treeselect/node_modules/pug-error/index.js:32:13)
        at /Users/ireadyouremails/contriboots/vue-treeselect/node_modules/pug-filters/lib/handle-filters.js:100:15
        at Array.forEach (native)
        at getAttributes (/Users/ireadyouremails/contriboots/vue-treeselect/node_modules/pug-filters/lib/handle-filters.js:95:14)
        at walk.includeDependencies (/Users/ireadyouremails/contriboots/vue-treeselect/node_modules/pug-filters/lib/handle-filters.js:17:19)
    
    Type: Discussion 
    opened by marcelfalliere 8
  • Re-render options after @search-change

    Re-render options after @search-change

    On my case, what a I need is to call an Ajax call after the @search-change redefining the options then. But, it seem that setting the options remotely is not permitted.

    <template lang="pug">
        treeselect(
            v-model="value"
            :options="options"
            @search-change="searchChange"
        )
    </template>
    
    <script>
        export default {
            options: [],
            value: null,
            methods: {
                searchChange () {
                     this.doAjaxRequest().then((body) => {
                         this.options = body.data
                     })
                }
            }
        }
    </script>
    

    Doing this way causes the options to be emptied. Am I doing something wrongly or do I have to implement it?

    Example: http://sagalbot.github.io/vue-select/docs/Advanced/Ajax.html

    Type: Discussion 
    opened by rinterliche 8
  • change text style

    change text style

    hi Fangzhou Li,

    first of all, thank you for this awesome plug-in. I really appreciate it I would like to know how to change the styling of the dropdown texts. I would like to be able to increase the text font size and its color from grayish to black. I tried to find the styling of these texts in the vue-treeselet.css but was no success. Can you kindly point to me which parts of the css on vue-treeselect.css is associated with the styling of the dropdown texts?

    Thanks again

    opened by maggiew61 7
  • Is it possible to dynamically select disabled sub-item (leaf) when the parent node is selected?

    Is it possible to dynamically select disabled sub-item (leaf) when the parent node is selected?

    Hi,

    I have a parent node, some of whose nodes are disabled. Is there a way that when I select the parent, its children (including the disabled ones) are selected?

    opened by kishankarun 7
  • Browser freeze with sort-value-by=

    Browser freeze with sort-value-by="LEVEL" and reactive input

    Hi,

    the browser keep freezing (maybe a loop) passing these props:

    <treeselect
      v-model="myValue"
      :options="myOptions"
      :multiple="true"
      sort-value-by="LEVEL" />
    

    I found out that the problem happens when I have v-model + multiple + sort-value-by="LEVEL". Any other sortValueBy value or substituting the v-model binding with :value fixes that, but I need this combination of reactive binding and level based sorting

    thanks

    opened by ordinov 0
  • How to limit maximum selection in treeselect

    How to limit maximum selection in treeselect

    I am going through documentation but couldn't find anything regarding limiting the selection. For example, if I want to set the maxlimit to 3 and treeselect have 10 option, then I should not able to select more than 3 options. How to do this scenario? Thanks

    opened by zmn95 0
  • Close menu

    Close menu

    Hello. Currently menu closes only when it looses blur as I could see calling instance.closeMenu() method. I want itself close menu when I want. How I can do that (probably with events?)

    opened by roma177 3
Releases(v0.4.0)
  • v0.4.0(Oct 10, 2019)

  • v0.3.0(Aug 31, 2019)

    New

    • New slots: before-list & after-list

    Improvements

    • Don't render <transition /> for leaf nodes to improve performance

    Bug Fixes

    • Fix value disappearance when multiple==false && disabled==true on IE (#274 by @qingyun1029)

    BREAKING CHANGES

    • Removed loading prop
    Source code(tar.gz)
    Source code(zip)
  • v0.2.0(Aug 24, 2019)

  • v0.1.0(Aug 12, 2019)

    Bug Fixes

    • Don't try to select if there is no selection (#208 by @fsateler)
    • Use same options when removing scroll and resize event listeners as when adding them (#266 by @sxn)
    • Fixed menu being accidentally closed when the scrollbar is clicked on IE again (#252)

    BREAKING CHANGES

    • Removed props deprecated in earlier versions
    Source code(tar.gz)
    Source code(zip)
  • v0.0.38(Jan 21, 2019)

    New

    • New prop: flattenSearchResults (#155 by @MaffooBristol)

    Other Changes

    • Use material-colors instead of google-material-color (#198 by @jaimesanz)
    Source code(tar.gz)
    Source code(zip)
  • v0.0.37(Aug 30, 2018)

    New

    • Add slot for selected value label (#140)

    Bug Fixes

    • Fix issues with loading children after an async search (#143)

    Other Changes

    • Setting isDefaultExpanded: true on a sub-item should also expand it ancestors
    • Include src folder in the publish (#156)
    • Remove debugger (#157)
    Source code(tar.gz)
    Source code(zip)
  • v0.0.36(Aug 6, 2018)

  • v0.0.35(Jul 27, 2018)

    Improvements

    • The position and open direction of the menu will be auto recalculated when 1) control size changes 2) menu size changes 3) page scrolls 4) window size changes (#132)
    • Handle delayed loading when user searches local options
    Source code(tar.gz)
    Source code(zip)
  • v0.0.34(Jul 24, 2018)

  • v0.0.33(Jul 23, 2018)

    New

    • New prop: z-index (#127)
    • New props for flat mode: autoSelectAncestors, autoSelectDescendants, autoDeselectAncestors & autoDeselectDescendants (#131)

    Other Changes

    • Removed escapeClearsValue prop
    Source code(tar.gz)
    Source code(zip)
  • v0.0.32(Jul 11, 2018)

    New

    • New prop: appendToBody (#98, #120)

    Bug Fixes

    • Do not emit input event when internalValue didn't change by @zikolach (#123)

    Other Changes

    • instanceId prop gets auto-generated default value now
    Source code(tar.gz)
    Source code(zip)
  • v0.0.31(Jul 4, 2018)

    New

    Async searching

    • New props: async, cacheOptions, defaultOptions & searchPromptText

    Bug Fixes

    • After root options are delayed loaded, the first option in the list should be highlighted

    Performance Improvements

    • Toggling highlighted state of a option is significantly faster when the list is long (#116)

    Other Changes

    • Improved value ordering when valueConsistsOf=ALL_WITH_INDETERMINATE
    • Improved internal states managing when user manually sets new value
    • Allow resetting a branch node to unloaded state by setting back children: null (#97)
    • No longer render hidden form fields when disabled
    Source code(tar.gz)
    Source code(zip)
  • v0.0.30(Jun 24, 2018)

  • v0.0.29(Jun 12, 2018)

    New

    • Added instanceId prop & deprecated old id prop

    Improvements

    • Clicking on trigger will no longer close the menu when multiple=true & searchable=false

    Bug Fixes

    • Should not do auto scroll when navigating using mouse (#107)
    Source code(tar.gz)
    Source code(zip)
  • v0.0.28(May 13, 2018)

    New

    Improved Keyboard Support

    • Move around using Arrow Up, Arrow Down, Home & End
    • Select or deselect options using Enter
    • Toggle expanded state using Arrow Left & Arrow Right
    • Move to upper level option using Arrow Left (for a branch node, it needs to be collapsed)

    Other Changes

    • Added transition wrapper to .vue-treeselect__list (#86)
    • CSS related bugs fixed by @wickkidd (#87) & @wangyi7099 (#88)
    • Slightly tweaked the colors of component
    • For multi-select mode, the whole area of value item is reactive to user clicking now
    • retainScrollPosition prop is removed. This feature will be always on and you can not manually disable it.
    Source code(tar.gz)
    Source code(zip)
  • v0.0.27(May 10, 2018)

    BREAKING CHANGES

    • Excluded src folder from npm publish

    New

    • Now .vue-treeselect__menu has been added transition wrapper that enables you to customize animation using CSS (#85)

    Improvements

    • When searching, expanding a branch node will show its all children (#78)

    Bug Fixes

    • Fixed that Backspace / Delete keys cannot delete value
    Source code(tar.gz)
    Source code(zip)
  • v0.0.26(May 9, 2018)

    Bug Fixes

    • Fixed that the icons may be not vertically centered when inheriting line-height from ancestor elements (by @wangyi7099)
    • Fixed that can't be bundled using webpack (#76)
    Source code(tar.gz)
    Source code(zip)
  • v0.0.25(May 6, 2018)

    BREAKING CHANGES

    • Some of LESS variables & CSS classnames are renamed

    Improvements

    • All icons updated
    • New option for valueConsistsOf prop: "ALL_WITH_INDETERMINATE" (by @Owumaro)
    Source code(tar.gz)
    Source code(zip)
  • v0.0.24(Apr 25, 2018)

    BREAKING CHANGES

    New Bundles

    From this version, vue-treeselect will export a non-minified version of bundle if you are consuming via a bundler like webpack or browserify, which brings some extra benefits:

    • Better debugging experience (for example, vue-treeselect will detect duplicate node ids and output warnings)
    • Source map support for both JavaScript & CSS

    New Delayed Loading Mechanism

    This version also comes with a refactor of delayed loading feature. The old loadRootOptions, loadChildrenOptions & loadChildrenErrorText props have been removed, and a new loadOptions prop added. For the reason of limitation that Vue cannot detect property additions, I decided to remove support for declaring unloaded branch nodes by setting isBranch: true. Check out the docs for details.

    Other Changes

    • Will not preserve space for arrows anymore when no branch nodes present (#68)
    • The first time for vue-treeselect to hit 100% test coverage!
    Source code(tar.gz)
    Source code(zip)
  • v0.0.23(Apr 21, 2018)

    Improvements

    • The information of selected nodes should be kept when reinitializing options
    • normalizer can only return keys that need to be customized (#66)
    Source code(tar.gz)
    Source code(zip)
  • v0.0.22(Apr 19, 2018)

    New

    • Added new prop: required (#56)

    Improvements

    • Now accepts beforeClearAll() returning Promise<Boolean>s in addition to Booleans (by @lkmadushan)

    Bug Fixes

    • Fixed an edge case that a branch node with no children can't be deselected
    Source code(tar.gz)
    Source code(zip)
  • v0.0.21(Apr 17, 2018)

    New

    • Added new prop: beforeClearAll (by @lkmadushan)

    Improvements

    • Now options prop is finally reactive! More improvements are on the way. (#16, #17, #18, #36, #58, #60, #63)
    Source code(tar.gz)
    Source code(zip)
  • v0.0.20(Apr 16, 2018)

  • v0.0.19(Apr 13, 2018)

    New

    • Added new event types: select & deselect (#53)

    Other Changes

    • Added an extra id argument to loadRootOptions and loadChildrenOptions, which is useful if your multiple instances of vue-treeselect are sharing the same function (by @yan170772286)
    Source code(tar.gz)
    Source code(zip)
  • v0.0.18(Apr 12, 2018)

  • v0.0.17(May 13, 2018)

    New

    • Added support for non-ajax forms by using hidden fields (related props newly added: name, joinValues & delimiter)

    Improvements

    • If the control is out of viewport, when activated the menu will open below

    Other Changes

    • autofocus is now changed to autoFocus. The old prop name will still work for some time but will be removed from a future version.
    Source code(tar.gz)
    Source code(zip)
  • v0.0.16(Apr 8, 2018)

    Bug Fixes

    • Fix: default selected nodes not showing correct label after the real data has been registered (delayed loading) (#49)
    • Fix: after loading children options of a checked node, should also check these children options
    Source code(tar.gz)
    Source code(zip)
  • v0.0.15(Mar 29, 2018)

  • v0.0.14(Mar 26, 2018)

  • v0.0.13(Mar 25, 2018)

Owner
Fangzhou Li
'use strict'
Fangzhou Li
Vue 3 multiselect component with single select, multiselect and tagging options.

Vue 3 Multiselect Sponsors Other libraries @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting. @vueform/toggl

Vueform 541 Nov 21, 2022
This component gives you a multi/single select with the power of Vuejs components.

This component gives you a multi/single select with the power of Vuejs components. Demo and doc site vue-multi-select https://github.com/IneoO/vue-mul

Valère 95 Apr 20, 2022
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 39 Jul 10, 2022
Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

@desislavsd/vue-select Lightweight and mighty select component like Chosen and Select 2 done the Vue way. Demos & Docs License MIT License Copyright (

null 25 Sep 12, 2022
stf vue select - most flexible and customized select

stf vue select VUE2 stf vue select - most flexible and customized select For detailed explanation on how things work, checkout the DEMO install # inst

Stfalcon LLC 62 Dec 22, 2021
Stylable searchable select component for VueJS. This component is renderless so you are free to customize it how you need to!

Please note that this package is still under active development. We encourage everyone to try it and give feedback. ss-select Searchable stylable sele

Miras Mustimov 26 Sep 19, 2022
Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

?? _Fireselect_ Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Ch

Firework 51 Jul 23, 2020
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.4k Nov 30, 2022
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Nov 25, 2022
Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

ENA 15 Nov 24, 2022
A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

JungJoo Seo 347 Aug 31, 2022
A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

Júlio Rosseti 71 Nov 11, 2022
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Nov 26, 2022
A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html tag which isn't supported in most of the browsers)

Searchable-Select-Dropdown A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html t

Rahul Gaba 13 Sep 15, 2022
Super awesome select dropdown vue.js component.

v-super-select An accessible and customizable select/drop down component that features searching, grouping, and virtual scrolling. Try out the demo sa

Will 7 Mar 31, 2022
Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

Selecto.js Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch. Demo / API / Main Project ⚙️ Instal

Daybrush (Younkue Choi) 1.2k Nov 21, 2022
A VueJS plugin that provides a searchable and reactive select list component with no dependencies.

vue-dynamic-select A VueJS plugin that provides a searchable and reactive select list component with no dependencies. View Online Demos Here Installat

Silas Montgomery 17 Sep 18, 2022
A vue version of bootstrap select

@alfsnd/vue-bootstrap-select A vue version of bootstrap select Demo Install npm install @alfsnd/vue-bootstrap-select --save Usage import VSelect from

Luis Sandoval 47 Apr 6, 2022
An vue select components,vselect是基于vue编写的select组件

vselect An vue select components Demo Live Demo Installation: npm install --save-dev vselect-component How to use 1、To include this project you need t

web_harry 5 Jan 17, 2021