Guide

Installation#

# Vue3
npm i --save @he-tree/vue
# Vue2
npm i --save @he-tree/vue @vue/composition-api

CDN#

Vue3: example
Vue2: example

Import#

Vue3#

import { BaseTree, Draggable } from '@he-tree/vue'
import '@he-tree/vue/style/default.css'

Vue2#

import { BaseTree, Draggable } from '@he-tree/vue/vue2'
import '@he-tree/vue/style/default.css'

BaseTree is the base tree component. Draggable component extends BaseTree.

Examples#

Example Projects#

Basic#

Projects

Frontend

Vue

Nuxt

React

Angular

Backend

Photos

Videos

<template>
  <BaseTree v-model="treeData" />
</template>

<script>
  import { BaseTree, Draggable, pro } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { BaseTree },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
              {
                text: 'Backend',
              },
            ],
          },
          { text: 'Photos' },
          { text: 'Videos' },
        ],
      }
    },
  }
</script>

vue

Fold and Checkbox#

Checked: []

<template>
  <div>
    Checked: {{ checked }}
    <BaseTree v-model="treeData" ref="tree" @check:node="onCheckNode">
      <template #default="{ node, stat }">
        <button @click="stat.open = !stat.open">
          {{ stat.open ? '-' : '+' }}
        </button>
        <input type="checkbox" v-model="stat.checked" />
        {{ node.text }}
      </template>
    </BaseTree>
  </div>
</template>

<script>
  import { BaseTree, Draggable, pro } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { BaseTree },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
              {
                text: 'Backend',
              },
            ],
          },
          { text: 'Photos' },
          { text: 'Videos' },
        ],
        checked: [],
      }
    },
    methods: {
      onCheckNode() {
        this.checked = this.$refs.tree.getChecked().map((v) => v.data.text)
      },
    },
  }
</script>

vue

Only function provided, you need add your own ui by slot. stat.checked has 3 value:true, false, null. null mean some child checked. Related methods: getChecked, getUnchecked, updateCheck, openAll, closeAll, isVisible.

Drag and Drop#

Projects

Frontend

Vue

Nuxt

React

Angular

Backend

Photos

Videos

<template>
  <Draggable v-model="treeData" />
</template>

<script>
  import { BaseTree, Draggable, pro } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { Draggable },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
              {
                text: 'Backend',
              },
            ],
          },
          { text: 'Photos' },
          { text: 'Videos' },
        ],
      }
    },
  }
</script>

vue

Indent#

Don't set node indent by css. Use prop indent.

Data#

Follow is example data. Key children can be modified by prop childrenKey, text can be modified by prop textKey.

{
  text: 'Root',
  children: [
    {text: 'Child'}
  ]
}

Data update by component#

v-model works. The component will clone data as inner data. When inner data changed, there are 3 ways to emit new data. It modifies binded data directly by default. Use prop updateBehavior to set the new data emit behavior. Available values of updateBehavior:

modify: modify binded data.
new: emit new data, suit for vuex.
disabled: don't do anything. You can use getData method to generate and get new data when you want.

Data update by user#

The component creates stat object for every node. It stores runtime info, such as open, parent, children, level. You can use prop statHandler handle each stat after they created. Related data: stats, statsFlat.

The methods to handle data: getStat, has, updateCheck, getChecked, getUnchecked, openAll, closeAll, isVisible, move, add, addMulti, remove, removeMulti, iterateParent, getSiblings, getData.

Virtual List#

Projects

Frontend

Vue

Nuxt

React

Angular

Backend

Photos

Videos

Node-378

Node-609

Node-034

Node-706

Node-518

Node-716

Node-334

Node-288

Node-856

Node-614

Node-879

Node-668

<template>
  <Draggable v-model="treeData" virtualization style="height: 500px" />
</template>

<script>
  import { BaseTree, Draggable, pro } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { Draggable },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
              {
                text: 'Backend',
              },
            ],
          },
          { text: 'Photos' },
          { text: 'Videos' },
          ...new Array(1000).fill(1).map((v) => ({
            text: 'Node-' + Math.random().toString().substring(2, 5),
          })),
        ],
      }
    },
  }
</script>

vue

Set height or max-height fot tree or its parent, or it will not work.Related props: virtualization, virtualizationPrerenderCount

Virtual list is implemented by another library of mine: virtual-list.

Open all nodes by default#

Related props: defaultOpen

Display from right to left#

Related props: rtl

Tree start from bottom to top#

Related props: btt

Angular

React

Nuxt

Vue

Frontend

Projects

<template>
  <BaseTree v-model="treeData" btt />
</template>

<script>
  import { BaseTree, Draggable, pro } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { BaseTree },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
            ],
          },
        ],
      }
    },
  }
</script>

vue

Render as Table#

action	Text	Level
	Projects	1
	Frontend	2
	Vue	3
	Nuxt	4
	React	3
	Next	4
	Angular	3
	Backend	2
	Photos	1
	Videos	1
action	Text	Level

<template>
  <BaseTree v-model="treeData" table>
    <template #prepend="{ tree }">
      <thead>
        <tr>
          <th v-if="!tree.dragOvering">action</th>
          <th>Text</th>
          <th>Level</th>
        </tr>
      </thead>
    </template>
    <template #append="{ tree }">
      <tfoot>
        <tr>
          <th v-if="!tree.dragOvering">action</th>
          <th>Text</th>
          <th>Level</th>
        </tr>
      </tfoot>
    </template>
    <template #default="{ node, stat, indentStyle, tree }">
      <td v-if="!tree.dragOvering">
        <input type="checkbox" v-model="stat.checked" />
        <button @click="stat.open = !stat.open">
          {{ stat.open ? '-' : '+' }}
        </button>
      </td>
      <td :style="indentStyle">
        {{ node.text }}
      </td>
      <td>
        {{ stat.level }}
      </td>
    </template>
  </BaseTree>
</template>

<script>
  import { BaseTree, Draggable, pro } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { BaseTree },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
              {
                text: 'Backend',
              },
            ],
          },
          { text: 'Photos' },
          { text: 'Videos' },
        ],
      }
    },
  }
</script>

vue

Render as table and virtual list can work at the same time. Related props: table. Use slot prepend, append to add table head and foot. Draggable table is pro feature, get pro to enable it.

About Drag and Drop#

Drag Trigger Element#

Related props: triggerClass

Draggable and Droppable#

Use stat to control draggable and droppable for each node. Also can be controled by hooks. Related props: disableDrag, disableDrop, eachDraggable, eachDroppable, rootDroppable, maxLevel

Max Level#

Related props: maxLevel

Drag Open#

When drag over a node, it will be open by default. Use prop dragOpen to change it. Use prop dragOpenDelay to set delay time. Hook prop: beforeDragOpen

Placeholder#

It will use a light blue box to mark droppable position when drag. Use slot placeholder to customize it, such as add tips.

When drag leave tree, placeholder will be removed. Use prop keepPlaceholder to keep placeholder even leave tree.

Runtime info when drag#

In drag process, runtime info is in an exported object dragContext.

// vue3
import { dragContext } from '@he-tree/vue'
// vue2
import { dragContext } from '@he-tree/vue/vue2'

Drop from outside#

When dropped from outside by Drag and Drop API, you can use hook props: onExternalDragOver, externalDataHandler to handle it. he-tree can work with any code which use HTML5 Drag and Drop API.

Touch & Mobile#

It is based on HTML5 Drag and Drop API. So it works in any device that supports Drag and Drop API. For others, you can try Drag and Drop API polyfill.

Watermark#

It prints a watermark information to browser console. Use prop watermark to disable it.

Pro#

pro has follow advanced features.

Drag cross trees.
Drag copy: copy node when drag start.
Draggable table.
Click to get pro detail.