A treeview component with nested options support for Vue.js

Last update: May 5, 2021

vue-treeview

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

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

Vue-TreeView 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)

Requires Vue 2.2+

Getting Started

It's recommended to install vue-treeview via npm, and build your app using a bundler like webpack.

npm install --save @tomatobobot/vue-treeview

This example shows how to integrate vue-treeselect with your Vue SFCs.

">

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

GitHub

https://github.com/tomatobobot/vue-treeview
You might also like...

πŸ“ A Vue.js component to display hierarchical data (like the MacOS X finder)

πŸ“ A Vue.js component to display hierarchical data (like the MacOS X finder)

A Vue.js component to display hierarchical data (like the MacOS X finder) Documentation The documentation is available on the website. Getting Started

Jun 15, 2022

πŸ‘» Vue.js component to apply glitch effect in any kind of text

πŸ‘» Vue.js component to apply glitch effect in any kind of text

vue-glitch πŸ‘» Vue.js component to apply glitch effect in any kind of text Install $ npm i -S vue-glitch # or $ yarn add vue-glitch Global Registrati

Feb 14, 2022

Tree component based on Vue implementation

 Tree component based on Vue implementation

Support drag, check, multiple check, bigData virtual scroll, lazy load, checkStrictly, add and delete node, etc.

Mar 18, 2022

Vue File tree component for Tauri

Vue File tree component for Tauri

Vue File tree component for Tauri

Jan 29, 2022

Vue.js component to select a CSV file, map the columns to fields, and post it somewhere.

Vue.js component to handle CSV uploads with field mapping. This version is for Vue 3. Click here for Vue 2. VueCsvImport is completely un-styled and c

Jun 24, 2022

A reactjs and vuejs tree component.

tree-component A reactjs and vuejs tree component. features vuejs component reactjs component open and close select and deselect disabled loading high

May 24, 2022

Component for rendering a tree view of JSON.

Component for rendering a tree view of JSON.

Vue JSON Component Demo A collapsable tree view for JSON. This package has some similarites with vue-json-tree-view so I'll address the differences be

Apr 28, 2022

A vue3 block organization tree view component. Hierarchical horizontal or vertical tree

A vue3 block organization tree view component. Hierarchical horizontal or vertical tree

A simple organization structure tree view based on Vue3.x. It supports events, slots, horizontal vision and nodes manipulation

Jun 17, 2022

Tree component for large amount of data, base on Vue3

vue-virtual-tree Based on the tree component encapsulated by vue3 and dedicated to large data volume, if the data volume is not large, using this comp

Jun 30, 2022
Related tags
A multi-select component with nested options support for Vue 3.
A multi-select component with nested options support for Vue 3.

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

Jun 3, 2022
A multi-select component with nested options support for Vue.js
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

Mar 18, 2019
Yet another Vue treeview implementation.

vue-tree vue-tree is a Vue component that implements a TreeView control. Its aim is to provide common tree options in a way that is easy to use and ea

Jun 16, 2022
Vue component to display tree based on D3.js layout.
Vue component to display tree based on D3.js layout.

Vue.D3.tree Vue components to display graphics based on D3.js layout. Tree Live demo https://david-desmaisons.github.io/Vue.D3.tree/tree Usage <tree :

Jun 25, 2022
A JSON Tree View Component for Vue.js
A JSON Tree View Component for Vue.js

Vue JSON Tree View Demo and Blogpost You can check out the demo on JSFiddle and read the Blogpost called Building a JSON Tree View Component in Vue.js

Jun 21, 2022
tree and multi-select component based on Vue.js 2.0
tree and multi-select component based on Vue.js 2.0

The document is poorly written and you are welcome to refine your documentation in the process of using it to better help others. Version: 2.x (δΈ­ζ–‡ζ–‡ζ‘£)

Jun 20, 2022
Tree component based on Vue.js

Liquor Tree A Vue tree component that allows you to present hierarchically organized data in a nice and logical manner. documentation | demos Features

Jun 15, 2022
Customizable draggable tree component for Vue.js
Customizable draggable tree component for Vue.js

sl-vue-tree Customizable draggable tree component for Vue.js demo install npm i sl-vue-tree Quick start <div id="app"> <sl-vue-tree v-model="nodes"/

Jun 16, 2022
A highly customizable and blazing fast Vue tree component ⚑🌲
A highly customizable and blazing fast Vue tree component ⚑🌲

VueJS Tree A highly customizable vuejs tree viewer Example codesandbox Getting Started Install You can install using yarn: $ yarn add vuejs-tree or wi

Jun 14, 2022
🌲A vue component for tree structure
🌲A vue component for tree structure

vue-tree-list A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging. Live Demo install Install the pl

Jul 4, 2022