A treeview component for Vue.js2
Support customizable context menu and tree types, configurable font awesom icon, depth control
Step1: install v-treeview
npm install v-treeview --save
Step2： In your vue component script import v-treeview
import VTreeview from "v-treeview"
Step3: In your export script
export default {
data() { ...
},
computed: { ...
},
methods: { ...
},
components: {
VTreeview
}
};
Step4: In your index.html, add fontawesome CDN
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
https://hyounoo.github.io/v-treeview/
Html
<v-treeview v-model="treeData" :treeTypes="treeTypes" @selected="selected" :openAll="openAll" :contextItems="contextItems" @contextSelected="contextSelected"></v-treeview>
JS
import VTreeview from "../src/index.js";
export default {
data() {
return {
openAll: true,
treeTypes: [
{
type: "#",
max_children: 6,
max_depth: 4,
valid_children: [
"FMM_EMPLOYEE",
"FMM_SPOUSE",
"FMM_CHILD",
"FMM_SIBLING",
"FMM_PARENT",
"FMM_PARENT_IN_LAW"
]
},
{
type: "FMM_EMPLOYEE",
icon: "far fa-user",
valid_children: ["Basic", "Top-up"]
},
{
type: "FMM_SPOUSE",
icon: "far fa-user",
valid_children: ["Basic", "Top-up"]
},
{
type: "FMM_CHILD",
icon: "far fa-user",
valid_children: ["Basic", "Top-up"]
},
{
type: "FMM_SIBLING",
icon: "far fa-user",
valid_children: ["Basic", "Top-up"]
},
{
type: "FMM_PARENT",
icon: "far fa-user",
valid_children: ["Basic", "Top-up"]
},
{
type: "FMM_PARENT_IN_LAW",
icon: "far fa-user",
valid_children: ["Basic", "Top-up"]
},
{
type: "Basic",
icon: "far fa-hospital",
valid_children: ["Top-up"]
},
{
type: "Top-up",
icon: "far fa-plus-square",
valid_children: []
}
],
treeData: [
{
id: 100767.0, text: "Employee", type: "FMM_EMPLOYEE", count: 0,
children: [
{
id: 100811.0, text: "Basic plan", type: "Basic", count: 0,
children: [
{
id: 101161.0, text: "Top-up", type: "Top-up", count: 152, children: []
}
]
},
{
id: 100812.0, text: "Basic plan", type: "Basic", count: 0, children: []
},
{
id: 101162.0, text: "This Top-up can be at level 2", type: "Top-up", count: 152, children: []
}
]
},
{
id: 100768.0, text: "Spouse", type: "FMM_SPOUSE", count: 0,
children: [
{
id: 100813.0, text: "Basic plan", type: "Basic", count: 0, children: [
{
id: 101163.0, text: "Top-up", type: "Top-up", count: 152, children: []
}
]
},
{
id: 100814.0, text: "Basic plan", type: "Basic", count: 0, children: [
{
id: 101164.0, text: "Top-up", type: "Top-up", count: 152, children: []
}
]
}
]
},
{
id: 100769.0, text: "Child", type: "FMM_CHILD", count: 0, children: [
{
id: 100815.0, text: "Basic plan", type: "Basic", count: 0, children: [
{
id: 101165.0, text: "Top-up", type: "Top-up", count: 152, children: []
}
]
},
{
id: 100816.0, text: "Basic plan", type: "Basic", count: 0, children: [
{
id: 101166.0, text: "Top-up", type: "Top-up", count: 0, children: []
}
]
}
]
},
{
id: 100770.0, text: "Parents", type: "FMM_PARENT", count: 0, children: [
{
id: 100817.0, text: "Basic plan", type: "Basic", count: 0, children: [
{
id: 101167.0, text: "Top-up", type: "Top-up", count: 124, children: []
}
]
}
]
}
],
contextItems: [],
selectedNode: null
};
},
methods: {
getTypeRule(type) {
var typeRule = this.treeTypes.filter(t => t.type == type)[0];
return typeRule;
},
contextSelected(command) {
switch (command) {
case "Create Basic":
var node = {
text: "New Basic Plan",
type: "Basic",
children: []
};
this.selectedNode.addNode(node);
break;
case "Create Top-up":
var node = {
text: "New Top-up",
type: "Top-up",
children: []
};
this.selectedNode.addNode(node);
break;
case "Rename":
this.selectedNode.editName();
break;
case "Remove":
break;
}
},
selected(node) {
this.selectedNode = node;
this.contextItems = [];
var typeRule = this.getTypeRule(this.selectedNode.model.type);
typeRule.valid_children.map(function(type, key) {
var childType = this.getTypeRule(type);
var item = {
title: "Create " + type,
icon: childType.icon,
type: childType
};
this.contextItems.push(item);
}, this);
this.contextItems.push({ title: "Rename", icon: "far fa-edit" });
this.contextItems.push({ title: "Remove", icon: "far fa-trash-alt" });
}
},
components: {
VTreeview
}
};