[![Actions Status](https://github.com/ParadeTo/vue-tree-list/workflows/Test/badge.svg)](https://github.com/ParadeTo/vue-tree-list/actions) # vue-tree-list A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging. ![vue-tree-demo.gif](https://raw.githubusercontent.com/ParadeTo/vue-tree-list/master/img/demo.gif) [Live Demo](http://paradeto.com/vue-tree-list/) # install Install the plugin then you can use the component globally. ```js import Vue from 'vue' import VueTreeList from 'vue-tree-list' Vue.use(VueTreeList) ``` Or just register locally like the example below. # use `npm install vue-tree-list` ```html ``` # props ## props of vue-tree-list | name | type | default | description | | :--------------------: | :------: | :-----------: | :-----------------------------------------------------------------------------------------: | | model | TreeNode | - | You can use `const head = new Tree([])` to generate a tree with the head of `TreeNode` type | | default-tree-node-name | string | New node node | Default name for new treenode | | default-leaf-node-name | string | New leaf node | Default name for new leafnode | | default-expanded | boolean | true | Tree is expanded or not | ## props of TreeNode ### attributes | name | type | default | description | | :-----------------: | :------------: | :---------------: | :------------------------------: | | id | string, number | current timestamp | The node's id | | isLeaf | boolean | false | The node is leaf or not | | dragDisabled | boolean | false | Forbid dragging tree node | | addTreeNodeDisabled | boolean | false | Show `addTreeNode` button or not | | addLeafNodeDisabled | boolean | false | Show `addLeafNode` button or not | | editNodeDisabled | boolean | false | Show `editNode` button or not | | delNodeDisabled | boolean | false | Show `delNode` button or not | | children | array | null | The children of node | ### methods | name | params | description | | :----------: | :---------------------: | :---------------------------: | | changeName | name | Change node's name | | addChildren | children: object, array | Add children to node | | remove | - | Remove node from the tree | | moveInto | target: TreeNode | Move node into another node | | insertBefore | target: TreeNode | Move node before another node | | insertAfter | target: TreeNode | Move node after another node | # events | name | params | description | | :---------: | :--------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------: | | click | TreeNode | Trigger when clicking a tree node. You can call `toggle` of `TreeNode` to toggle the folder node. | | change-name | {'id', 'oldName', 'newName'} | Trigger after changing a node's name | | delete-node | TreeNode | Trigger when clicking `delNode` button. You can call `remove` of `TreeNode` to remove the node. | | add-node | TreeNode | Trigger after adding a new node | | drop | {node, src, target} | Trigger after dropping a node into another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop into | | drop-before | {node, src, target} | Trigger after dropping a node before another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop before | | drop-after | {node, src, target} | Trigger after dropping a node after another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop after | # customize operation icons The component has default icons for `addTreeNodeIcon`, `addLeafNodeIcon`, `editNodeIcon`, `delNodeIcon`, `leafNodeIcon`, `treeNodeIcon` button, but you can also customize them and can access `model`, `root`, `expanded` as below: ```html ```

	Stars	Issues	Version	Updated	Created
liquor-tree	395	103	0.2.70	4 years ago	6 years ago
vue-tree-list	599	69	1.5.0	3 years ago	7 years ago
vue-tree-nav	26	1	0.0.16	5 years ago	6 years ago
vue-tree-navigation	160	13	4.0.1	5 years ago	6 years ago

liquor-tree vs vue-tree-list vs vue-tree-nav vs vue-tree-navigation

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past