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.