he-tree-vue is a Vue.js component to render a nested tree view that allows you to resort nodes via drag and drop.
More features:
- Checkable nodes with checkboxes.
- Filterable nodes with a search box.
- Expand & collapse nodes with click.
Basic usage:
1. Install & import.
import {
Tree, // Base tree
Fold, Check, Draggable, // plugins
cloneTreeData, walkTreeData, getPureTreeData, // utils
} from 'he-tree-vue'
import 'he-tree-vue/dist/he-tree-vue.css'
2. Create a tree component in your template.
<template> <Tree :value="treeData"></Tree> </template>
3. Register the component.
export default {
components: {Tree},
data() {
return {
treeData: yourdATA
}
},
}
4. Prepare your hierarchical data for the nested tree.
[
{text: 'node 1'},
{text: 'node 2', children: [
{text: 'node 2-1'},
{text: 'node 2-2'},
{text: 'node 2-3'}
]}
]
Preview:
Changelog:
03/19/2023
- fix(basetree): update dependence virtual-list to fix long list
v4.1.2 (12/26/2021)
- Update
v4.0.0 beta (08/03/2021)
- Bug Fixes
v2.0.11 (06/26/2021)
- fix(draggable plugin): correct the value of store.targetPath
v2.0.10 (04/17/2021)
- draggable plugin: fix node insert error after drop
v2.0.9 (04/12/2021)
- draggable plugin: wrong result when move downwards in same level
v2.0.8 (03/30/2021)
- draggable plugin: decrease delay before remove mask tree
- draggable plugin: fix change event
v2.0.7 (12/13/2020)
- feat(draggable plugin): add alias after-placeholder-created for event…
v2.0.5 (11/26/2020)
- Updated
v2.0.4 (08/29/2020)
- draggable plugin: add prop: edgeScrollSpecifiedContainerX, edgeScrollSpecifiedContainerY
v2.0.3 (08/08/2020)
- Fixed draggable plugin
Download Details:
Author: phphe
Live Demo: https://he-tree-vue.phphe.com/
Download Link: https://github.com/phphe/he-tree-vue/archive/master.zip
Official Website: https://github.com/phphe/he-tree-vue
Install & Download:
# NPM
$ npm install he-tree-vue --save