Draggable Tree View For Vuetify

Description:

A tree view component for Vuetify framework that allows the user to reorder parent & child nodes with drag and drop.

Basic usage:

1. Install and import the component.

import VuetifyDraggableTreeview from 'vuetify-draggable-treeview'
Vue.use(VuetifyDraggableTreeview)

2. Add the draggable tree view component to the template.

<template>
  <v-draggable-treeview
    group="example"
    v-model="items"
  ></v-draggable-treeview>
</template>

3. Add nodes to the tree view.

export default {
  data() {
    return {
      items: [{ id: 1, name: "node-1", children: [{ id:11, name: "node1-1" }] }]
    }
  }
}

Preview:

Draggable Tree View For Vuetify

Changelog:

v0.0.6 (09/11/2020)

  • Feature/change expand icon

v0.0.5 (08/08/2020)

  • Fix label slot for children nodes not working

Download Details:

Author: suusan2go

Live Demo: https://v-draggable-treeview.netlify.app/

Download Link: https://github.com/suusan2go/vuetify-draggable-treeview/archive/master.zip

Official Website: https://github.com/suusan2go/vuetify-draggable-treeview

Install & Download:

# Yarn
$ yarn add vuedraggable

# NPM
$ npm i vuedraggable --save

You Might Be Interested In:

Tags:

Add Comment