Wednesday, 13 February, 2019 UTC


Summary

TreeView for Vue.js
A TreeView component for vuejs.
Usage
Install the package into your project:
npm install --save @ll931217/vue-treeview
or
yarn add @ll931217/vue-treeview
Add this to your main.js file:
import Vue from 'vue'
import TreeView from '@ll931217/vue-treeview'

Vue.use(TreeView)
Then add this to where you want to use the treeview:
tree-view(:tree="tree")
The treeview takes in the prop tree, which is in the following structure:
[{
  "text": "First Level",
  "nodes": [{
    "text": "Second Level",
    "nodes": [{
      "text": "Third Level",
      "nodes": [{
        "text": "Final Level",
        "value": "The Value"
      }]
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level",
      "nodes": [{
        "text": "Final Level",
        "value": "The Value"
      }, {
        "text": "Final Level",
        "value": "The Value"
      }]
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level",
      "nodes": [{
        "text": "Final Level",
        "value": "The Value"
      }]
    }]
  }, {
    "text": "Second Level",
    "nodes": [{
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }]
  }]
}, {
  "text": "First Level",
  "nodes": [{
    "text": "Second Level",
    "nodes": [{
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }]
  }, {
    "text": "Second Level",
    "nodes": [{
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level",
      "nodes": [{
        "text": "Final Level",
        "value": "The Value"
      }]
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }, {
      "text": "Third Level"
    }]
  }]
}]

Upcoming Features
  • [ ] Add router-link function to layer with value key
  • [ ] Increase further customization with style prop
GitHub