A folder tree project by vue
DEMO Live Demo
npm install --save fun-tree
./main.js
import FunTree from 'fun-tree/dist/fun-tree.js'
import 'fun-tree/dist/fun-tree.css' // Optional
Vue.use(FunTree)
ES6
import FunTree from 'fun-tree/dist/fun-tree.js'
import 'fun-tree/dist/fun-tree.css' // Optional
components: {
FunTree: FunTree,
},
If you want to customer css, you can not import fun-tree.css
Add a component inside your template
HTML
<FunTree :trees="yourTreeData"
@clickEvent="myEvent()">
</FunTree>
Javascript
export default {
name: "App",
data() {
return {
trees: [
{ text: "Level1", selected: true },
{
text: "Level2",
opened: true,
children: [
{ text: "Level2-1", disabled: true },
{ text: "Level2-2", icon: "node-icon-music", selected: true },
{ text: "Level2-3", icon: "node-icon-word" },
],
},
{
text: "Level3",
opened: false,
children: [
{ text: "Level3-1" },
{ text: "Level3-2", icon: "node-icon-excel" },
{ text: "Level3-3", icon: "node-icon-ppt", selected: true },
],
},
],
};
},
methods: {
myEvent(node, actions, values) {
console.log(node); // current node vue component
console.log(actions); // do actions with current node
console.log(values); // current node values
},
}
}
Name | Type | Default | Required | Description |
---|---|---|---|---|
trees | Array | [ ] | yes | trees data |
clickEvent | Function | undefined | no | tree's node click event |
checkboxShow | Boolean | true | no | set it show checkbox |
checkboxAction | Boolean | true | no | set it checkbox action |
@clickEvent(node, actions, values)
node : current node vue component
actions : do actions with current node
values : current node values
Method | Params | Description |
---|---|---|
addChild | (object) nodeData | add child with this node |
removeChildren | remove this node's children | |
removeNode | remove this node | |
checked | set this node's selected true or false | |
open | set this node's opened = true | |
close | set this node's opened = false |
Name | Type | Default | Required | Description |
---|---|---|---|---|
text | String | New Node | yes | set node show text |
icon | String | no | icon class name | |
opened | Boolean | false | no | set node opened |
selected | Boolean | false | no | set node selected |
disabled | Boolean | false | no | set node disabled |
children | Array | false | no | set node children |
Image | Class Name |
---|---|
node-icon-closed | |
node-icon-open | |
node-icon-disabled | |
node-icon-not | |
node-icon-danger | |
node-icon-image | |
node-icon-music | |
node-icon-word | |
node-icon-excel | |
node-icon-ppt |
Class Name | Description |
---|---|
tree-node | Node |
tree-content | Node content (checkbox, icon, text). |
tree-content:hover | Node content hover |
tree-button-unfold | Node unfold button. |
tree-button-fold | Node fold button. |
tree-button-none | Node button none. |
tree-checkbox | Node checkbox default. |
tree-checkbox:hover | Node checkbox hover. |
tree-checkbox-checked | Node checkbox checked. |
tree-word | Node word. |
This is open-sourced software licensed under the MIT license.