Tree and multi-select component based on Vue.js 2

Tree and multi-select component based on Vue.js 2

tree and multi-select component based on Vue.js 2.0 .

npm npm GitHub stars GitHub forks license

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  (中文文档)

QQ Group: 255965810
we guess you may also see version 1.0

Online Demo

SelectTree API (2018-4-15)

The latest release has the ability to support the dropdown tree, extending the following with the same basic attributes and events (consistent with the Tree API)

Parameters Description Type Optional value Default value
searchable Search Functionality Required Boolean Y true
pleasechoosetext Dropdown box default prompts this article String Y Please choose ...
searchtext Search box default prompts this article String Y Search ...
searchfilter Custom search pull down tree filter function Function Y Node => mode.title.indexOf (This.searchworld) > 1

Effect Chart (no demo here, other effects like Onlinedemo)

How to use

Please read the Tree API documentation before using the selectTree

import { VTree, VSelectTree } from 'vue-tree-halower'
Vue.use (VTree)
Vue.use (VSelectTree)
<v-select-tree :data='treeData' v-model="['node-1-2']"/>

Tree API Doc

Node Property

Parameters Description Type Optional values Default value
id when this property is empty, the title property will be used as the key String Y -
title node name String N -
children child nodes Array[object] Y -
async whether to load child nodes asynchronously Boolean Y false
expanded node Expansion Boolean Y false
halfcheck whether the node is half optional (subordinate selected) Boolean Y false
visible is the node visible Boolean Y true
selected whether the node is selected Boolean Y false
checked whether the node check box is selected Boolean Y false
nocheck specifies that a node does not render check box when multiple checkboxes are open Boolean Y false
loading open load effect Boolean Y false
chkDisabled disable the function of a check box for a node Boolean Y false
hasExpanded node has expanded Boolean Y false
parent get parent node(when allowGetParentNode=true,the node will add parentmethod)) Function - undefined
selDisabled disable the select function of a node Boolean Y false

Tree Property

Parameters Description Type Optional values default value
data tree Data Source Array[object] N -
multiple turn on Check mode Boolean Y false
tpl custom templates JSX Y false
halfcheck turn on semi-select mode Boolean Y select all
scoped quarantine node Selected state Boolean Y false
draggable support drag? Boolean Y false
dragafterexpanded ro expand after dragging Boolean Y true
canDeleteRoot can delete the root node Boolean Y false
maxLevel node max level Number Y 1024
topMustExpand the top level must can expand Boolean Y true
allowGetParentNode allow get the parent node Boolean Y false
radio the selected node only one Boolean Y false
selectAlone select is alone Boolean Y false


Method name Description Parameters
getSelectedNodes returns an array of currently selected nodes,isOriginal:false, isOriginal: Boolean, ignoreInvisibleNode: Boolean
getCheckedNodes returns the array of nodes selected by the current check box isOriginal: Boolean,ignoreInvisibleNode: Boolean
getNodes the options objects such as {selected:true}, if empty, use {} options: Object,data: Array, isOriginal: Boolean, ignoreInvisibleNode: Boolean
searchNodes filter:function/string (if it is a function, it will eventually return a Boolean type) node
nodeSelected to select a node node: Object
addNode add a node parentNode: Object, node: Object
addNodes add some nodes parentNode: Object, nodes: Array


Event name Description Parameters
node-click click the node to trigger the event node: Object
node-select click the select to trigger the event node: Object, selected: boolean, position: {level, index}
node-check click the checkbox to trigger the event node: Object, checked: boolean, position: {level, index}
node-mouse-over over the node to trigger the event node: Object, index: Number, parentNode: node, position: {level, index}
async-load-nodes event used to implement asynchronous loading node: Object
drag-node-end drag node end trigger the event {dragNode: Object, targetNode: Object}
del-node after delete a node { parentNode: Object
node-expand click the expand to trigger the event node: Object, expand: boolean, position: {level, index}

How to use

Step1: install plugins

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev

npm install vue-tree-halower  --save

Step2: In your .babelrc

  "presets": ["env"],
  "plugins": ["transform-vue-jsx"]

Step3: In your main.js

import 'vue-tree-halower/dist/halower-tree.min.css' // you can customize the style of the tree
import VTree from 'vue-tree-halower'




  <div class="tree">
    <input class="tree-search-input" type="text" v-model.lazy="searchword" placeholder="search..."/>
    <button class=" tree-search-btn" type="button" @click="search">GO</button>
    <v-tree ref='tree' :data='treeData' :multiple="true" :tpl='tpl' :halfcheck='true' />


export default {
  name: 'HelloWorld',
  data () {
    return {
      searchword: '',
      initSelected: ['node-1'],
      treeData1: [{
        title: 'node1',
        expanded: true,
        children: [{
          title: 'node 1-1',
          expanded: true,
          children: [{
            title: 'node 1-1-1'
          }, {
            title: 'node 1-1-2'
          }, {
            title: 'node 1-1-3'
        }, {
          title: 'node 1-2',
          children: [{
            title: "<span style='color: red'>node 1-2-1</span>"
          }, {
            title: "<span style='color: red'>node 1-2-2</span>"
      treeData2: [{
        title: 'node1',
        expanded: false,
        async: true

      treeData3: [{
        title: 'node1',
        expanded: true,
        children: [{
          title: 'node 1-1',
          expanded: true,
          children: [{
            title: 'node 1-1-1'
          }, {
            title: 'node 1-1-2'
          }, {
            title: 'node 1-1-3'
  methods: {
    // tpl (node, ctx, parent, index, props) {
    tpl (...args) {
      let {0: node, 2: parent, 3: index} = args
      let titleClass = node.selected ? 'node-title node-selected' : 'node-title'
      if (node.searched) titleClass += ' node-searched'
      return <span>
        <button class="treebtn1" onClick={() => this.$refs.tree.addNode(node, {title: 'sync node'})}>+</button>
         <span class={titleClass} domPropsInnerHTML={node.title} onClick={() => {
      <button class="treebtn2" onClick={() => this.asyncLoad(node)}>async</button>
      <button class="treebtn3" onClick={() => this.$refs.tree.delNode(node, parent, index)}>delete</button>
    async asyncLoad (node) {
      this.$set(node, 'loading', true)
      let pro = new Promise(resolve => {
        setTimeout(resolve, 2000, ['async node1', 'async node2'])
      this.$refs.tree1.addNodes(node, await pro)
      this.$set(node, 'loading', false)
    search () {


Github Repository