中文文档 | English
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.
yarn add simple-vue-tree --save
or
npm install simple-vue-tree --save
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'
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'.
An array of tree node data like:
[
{
id: 1,
title: 'node-1'
},
{
id: 2,
title: 'node-2',
children: [
{
id: 3,
title: 'node-2-1',
}
]
}
]
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.
Show expand icon. Default value: true.
The class of node element.
You can drag and drop tree nodes by adding a draggable attribute. Default value: false.
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.
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.
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'
}
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.
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.
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.
This prop is used to control whether the show style is split-page or not, with a default value false.
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 }.
| 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 |
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.
This event will be emited when the node content element is clicked.
- return value: (event, vNode)
vNode: virtual dom of current tree node.
This event will be emited when the node content element is double clicked.
- return value: (event, vNode)
vNode: virtual dom of current tree node.
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.
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.
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.
- 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.
- return value: (event, vNode)
vNode: virtual dom of the dragging tree node.
- return value: (event, vNode)
vNode: virtual dom of the dragging tree node.
- return value: (event, vNode)
vNode: virtual dom of the node where dropped.
- return value: (event, vNode)
vNode: virtual dom of the node where dropped.
This event is fired when you choose a drop position.
- return value: (event, position)
position: virtual dom of the node where dropped.
- return value: (event, vNode)
vNode: virtual dom of the node where dropped.
yarn install
yarn run serve
yarn run build
yarn run lint