Skip to content
Universal and flexible tree component for Vue.js
JavaScript Vue
Branch: master
Clone or download
XAHTEP26
XAHTEP26 Update version.
Latest commit 891316d Apr 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Fix problem with components in slot. Apr 22, 2019
dist Fix problem with components in slot. Apr 22, 2019
src Fix problem with components in slot. Apr 22, 2019
.gitignore Initial commit Nov 9, 2018
LICENSE Initial commit Nov 9, 2018
README.md Create README.md Nov 13, 2018
package-lock.json Fix problem with components in slot. Apr 22, 2019
package.json Update version. Apr 22, 2019

README.md

vue-vtree

Universal and flexible tree component for Vue.js

Installation

NPM

npm install vue-vtree

CDN

jsDelivr

<script src="https://cdn.jsdelivr.net/npm/vue-vtree@latest/dist/v-tree.min.js"></script>

unpkg

<script src="https://unpkg.com/vue-vtree"></script>

Getting Started

In your script entry point:

import Vue from 'vue';
import VTree from 'vue-vtree';
Vue.component('v-tree', VTree);

Usage

Just write one level of tree in scoped-slot and pass children data to empty child v-tree component and it will inherit the parent slot template.

<template>
  <div id="app">
    <v-tree :scope-data="menu">
      <ul slot-scope="menuLevel">
        <li v-for="menuItem in menuLevel">
          <a :href="menuItem.url">{{ menuItem.title }}</a>
          <v-tree v-if="menuItem.children" :scope-data="menuItem.children"></v-tree>
        </li>
      </ul>
    </v-tree>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        menu: [
          { title: 'Home', url: '#' },
          {
            title: 'Posts',
            url: '#',
            children: [
              { title: 'Development', url: '#' },
              { title: 'Design', url: '#' },
              { title: 'Other', url: '#' }
            ]
          },
          {
            title: 'Handbooks',
            url: '#',
            children: [
              {
                title: 'HTML',
                url: '#',
                children: [
                  { title: 'a', url: '#' },
                  { title: 'span', url: '#' },
                  { title: 'div', url: '#' }
                ]
              },
              {
                title: 'CSS',
                url: '#',
                children: [
                  { title: 'display', url: '#' },
                  { title: 'position', url: '#' },
                  { title: 'background', url: '#' },
                  { title: 'border', url: '#' }
                ]
              },
            ]
          },
        ]
      }
    }
  }
</script>

Live Demo

Property "scope-data" can take any value.

Demo for JSON

Demo for Number

License

The MIT License

You can’t perform that action at this time.