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.

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

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

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

    Type: Question 
    opened by s1041613 31
  • Feature:增加value绑定类型选择

    Feature:增加value绑定类型选择

    树形选择组件绑定的value希望可以配置为一个对象数组,每一个对象里面有个isBranch字段说明这个item是leaf还是branch

    Type: Discussion 
    opened by reuwi 21
  • 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: Discussion Type: Question 
    opened by zgj233 17
  • 在bootstrap中样式乱了

    在bootstrap中样式乱了

    在bootstrap中下拉中的树样式乱了,请教一下怎么解决

    Type: Question 
    opened by wangzhiman 16
  • 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
  • vue-treeselect , v-model 相关的问题

    vue-treeselect , v-model 相关的问题

    Type: Question 
    opened by zgj233 13
  • 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
  • 展开列表,会回到顶部

    展开列表,会回到顶部

    image image 你好,当滚动到浏览器窗口外的位置时,点击展开,浏览器会回到顶部后,列表再展开,这是为什么?

    opened by mark3h 10
  • option无法展示label值,展示空白内容?而且选项箭头位置不居左?

    option无法展示label值,展示空白内容?而且选项箭头位置不居左?

    image image

    用的是文档中的options source,但是展示结果如上图 无法使用 Thank You!

    Type: Question 
    opened by FanNanTx 10
  • can not copy selected item text

    can not copy selected item text

    modify file: node_modules/@riophae/vue-treeselect/dist/vue-treeselect.cjs.js line 1273 :

    handleMouseDown: onLeftClick(function handleMouseDown(evt) {
          // add code
          if(!(evt.target.parentElement.className === 'vue-treeselect__multi-value-label')) {
            evt.preventDefault();
          }
          // evt.preventDefault();
          evt.stopPropagation();
    
    opened by Plutda 0
  • Chrome suggestions

    Chrome suggestions

    Good Morning!

    I am having problems since I am using the treeselect and the Chrome address suggestions are appearing. This happens in some cases not in all. I know chrome updated autocomplete = "false" to autocomplete = "none". Does anyone know if there is a solution to this problem?

    opened by fbiagetti 0
  • How expand options in ASYNC_SEARCH ?

    How expand options in ASYNC_SEARCH ?

    Hello.

    How expand options in ASYNC_SEARCH ? By default options aren't expand but i need to expand it on async search. I'he tried use isDefaultExpanded, but it doesn't work in ansyc.

    image

    opened by AshMorrow 0
  • How to only allowed a single root node being selected, but multiple child selection?

    How to only allowed a single root node being selected, but multiple child selection?

    Hi there, I am rendering my dropdown in this way <treeselect ref="treeselect" v-model="value" :options="options" value-format="object" multiple="true"/>, but for this where multiple root nodes are allowed to be selected. But i want to choose only a single root node at a time with multiple child selection. May i know how can i achieve this?

    opened by dreamxyz95 1
  • How can we display the total count of selected children?

    How can we display the total count of selected children?

    HI @riophae ,

    Thanks for the features provided already. But I want to display total count of the selected options in dropdown.

    Country (0/3)
           State 1
           State 2
           State 3
    

    If I will select State 1 and State 2 then count should be Country (2/3). Is it possible to do?

    opened by jaymit-ecodedash 1
  • How to add our own class for dropdown text?

    How to add our own class for dropdown text?

    Hi @riophae ,

    Thanks for the features provided already. but How can I specify the class in labelClassName/countClassName?

    <treeselect
        :options="options"
        :multiple="true"
        v-model="value"
        value-format="object">
      <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
         {{ node.label }} - Description: {{ node.raw.desc }}
      </label>
    </treeselect>
    
    opened by jaymit-ecodedash 0
  • 模糊查询问题

    模糊查询问题

    通过关键字模糊查询 查询出来数据不对

    image 这里查询的是大连大辛,为何其他关于辛的也出现了

    opened by airzhanglin 0
  • Fix mousedown event for other outside components.

    Fix mousedown event for other outside components.

    Your component does not return a mousedown event, and therefore other page elements cannot handle this event correctly. please fix it. example link https://codesandbox.io/s/elated-moser-s7qgt?file=/src/App.vue image

    opened by AndrgitA 0
  • Hide selected options and only show the selection in tree

    Hide selected options and only show the selection in tree

    I wold like to be possible show the selection only in tree view, hidding the selected options in selector. All this also without losing the search engine.

    The issue: make possible hide the selections in the selector and only show it in tree

    image

    opened by PascualMaestreServer 0
  • id重复的问题

    id重复的问题

    假如我想用这个tree做一个部门人员的列表菜单 部门id 和人员id有重复 能解决么

    opened by YhBoy 0
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 11, 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 3, 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 25, 2018)

  • v0.0.13(Mar 25, 2018)

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 306 May 23, 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 27 Jun 19, 2020
Select with autocomplete, slots, bootstrap and material design themes.

The current version is 3.x, if you are looking for 2.x, you can find it here (also, see breaking changes). Flexible select Demo + Documentation Featur

Илья 207 Jun 3, 2021
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 69 May 11, 2021
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 173 Jun 12, 2021
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 61 Aug 10, 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 3.9k Jun 3, 2021
✅ Vue 2.x component for selecting image from list

✅ Vue Select Image Vue 2.x component for selecting image from list Demo https://mazipan.github.io/vue-select-image/ Installation # Yarn yarn add vue-s

Irfan Maulana 124 May 24, 2021
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 11 Dec 9, 2020
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 14 Apr 20, 2021
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 5.8k Jun 3, 2021
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 5.8k Jun 11, 2021
A multi-select component with nested options support for Vue.js

vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat

Fangzhou Li 2.2k Jun 10, 2021
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 44 Mar 3, 2021