v-treeview

A treeview component for Vue.js2

Support customizable context menu and tree types, configurable font awesom icon, depth control

How to use

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> 

Demo

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   } };