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