Simple-vue-tree NPM

中文文档 | English

Change Log

simple-tree

This is a simple component of showing and handling tree data. You can install and use this component in your project by npm or yarn, or you can also setup and run this project to experience the component.

Preview

demo

Using in your project

Step 1

yarn add simple-vue-tree --save

npm install simple-vue-tree --save

Step 2

In the entry file main.js, you need to import simple-vue-tree and the styles like:

import 'simple-vue-tree'
import 'simple-vue-tree/dist/lib/simple-tree.css'

Step 3

Then you can using this component by use tag 'simple-tree' in the vue template.

  <simple-tree
    :treeData="treeData">
  <simple-tree/>

API is following, and you can also find simple usages in the directory 'src/componenets/HelloWorld.vue'.

Tree props

treeData Array

An array of tree node data like:

[
  {
    id: 1,
    title: 'node-1'
  },
  {
    id: 2,
    title: 'node-2',
    children: [
      {
        id: 3,
        title: 'node-2-1',
      }
    ]
  }
]

props Object

The configuration options of node data. Sometimes your node data is not has same name key as default. Default keys are id, title, and children.
You can use this prop to send your node data keys to the component. For example, your node data is like:

{
  id: 1,
  name: 'node-1'
}

You need use this prop like:

{
  title: 'name'
}

Then the key name will be used as the default key title.

expand Boolean

Show expand icon. Default value: true.

nodeClass Object, Array, String

The class of node element.

draggable Boolean

You can drag and drop tree nodes by adding a draggable attribute. Default value: false.

allowDrag function

This function will be executed before dragging a node. If false is returned, the node can not be dragged.

params:

data Object : your node data Object.

allowDrop function

This function will be executed when the a node is dragging over another node. If true is returned, you can choose a position to drop the node and the tree-drop event will emitted and you can handle your tree data in the handle function. If false is returned, the tree-drop event will not be emitted.

params:

dragVNode Object : the dragging node's virtual node.
dropVNode Object : the node's virtual node where dropped.
position String : before, after, and inner are possible values, which is the relative position of dragging node and drop node.

dragNote Object

This prop will change the drop position notify when you drag the node. You can customize the notify which the default value is

{
  before: 'As previous node',
  after: 'As next node',
  inner: 'As child node'
}

indentLine Boolean | Array

This prop is used to show a vertical line before the same level nodes. Diffrent color lines will be showed before diffrent level nodes according to a color list. If the value is true, a default color list is 'red', 'green', 'blue'. And you can also set a customized list to replace the defaule list.

maxIndent Number

This prop is used to control the indent distance of children nodes. If you don't set prop indentLimit, the indent distance only depands on maxIndent. Default value: 20.

indentLimit Number

This prop is used to limit the max indent distance of the tree.

If there are many node levels, the node will overflow the tree box horizontally.And you can set this prop to avoid this unexpected effect.

Notice: if indentLimit < 100, this prop will be regarded as percentage. In this instance, the value will be treeWidth * indentLimit / 100.

The indent width of each level will be value / levels.

splitPage Boolean

This prop is used to control whether the show style is split-page or not, with a default value false.

refreshPage callback

A callback function will be called that when the show node changes. And the arguments will be a list which contains all the root nodes' brief information like { id: xxx, title: xxx }.

Tree methods

methods	introduce	args
pushToShow	Used in split-page mode, and call this function to show the children of the node you give	nodeData
jumpBack	Used in split-page mode, and call this function to back to a root node of current node	the id of the node

Tree events

Notice: the return type 'vNode' means that the value is virtual dom of tree-node. Some data of vNode is:

nodeData : data of current node.

parentData : data of current node's parent node. Mostly, parentData is the refrence of your tree-node data. But there is a exceptive case when parentData is the root of the tree. In this case, parentData will be like:

{
  isRoot: true,
  children: [
    // ...
  ]
}

The property isRoot is only for the 1st level nodes's parentData, and the property children is the reference of your tree data.

content-click

This event will be emited when the node content element is clicked.

return value: (event, vNode)
vNode: virtual dom of current tree node.

content-double-click

This event will be emited when the node content element is double clicked.

return value: (event, vNode)
vNode: virtual dom of current tree node.

node-click

This event will be emited when the node element is clicked. Though similar to content-click, it differs in taht it is fired when a chilren node element is clicked. In most cases, maybe content-click satisfy your demand.

return value: (event, vNode)
vNode: virtual dom of current tree node.

node-double-click

This event will be emited when the node element is double clicked. Though similar to content-double-click, it differs in taht it is fired when a chilren node element is clicked.

return value: (event, vNode)
vNode: virtual dom of current tree node.

expand-button-click

This event will be fired when click the expanded button.

The following content is about tree node dragging event. Maybe tree-drop is enough in most case except that you need customize the dragging effect.

tree-drop

return value: (dragVNode, dropVNode, position)
dragVNode: the dragging node's virtual dom. dropVNode: the node's virtual dom where dropped. position: the relative position, and the posiible values are before, after and inner.