he tree is a draggable, sortable vue tree component, with a dragged placeholder, and defining types.
Features
- Including functions for folding and checkbox. You can easily customize the user interface and contact them.
- Edge pass. Automatic scrolling is when you drag a node to the edge of the element using the scroll bar.
- Supports RTL.
- Pull through the trees. (Pro plugin required)
- Clone upon checkout. (Pro plugin required)
Must Read: Makes Any Table Sortable By Header Columns | jQuery sortableTable.js
How to make use of it:
Install and download:
# NPM $ npm install he-tree-vue --save
1. Installation and 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. Set up the hierarchical data of the nested tree.
[
{text: 'node 1'},
{text: 'node 2', children: [
{text: 'node 2-1'},
{text: 'node 2-2'},
{text: 'node 2-3'}
]}
]See Demo And Download
Official Website(phphe): Click Here
This superior jQuery/javascript plugin is developed by phphe. For extra Advanced usage, please go to the official website.