Awesome Open Source
Awesome Open Source

Actions Status codecov npm version

vuetify-draggable-treeview

Drag and drop v-treeview (Vuetify Treeview) component.

Live Demo

v-treeview

Installation

yarn add vuetify-draggable-treeview
// @NOTE: This component requires vue, vuetify, vuedraggable as peerDependency.
yarn add vuedraggable

Setup

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

// or manually import
VuetifyDraggableTreeview

export default Vue.extend({
  components: {
    VuetifyDraggableTreeview
  }
})

Usage

Basic Example

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

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
    }
  }
}
</script>

Drag and drop only in children.

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

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
    }
  }
}
</script>

Using slot

<template>
<v-draggable-treeview v-model="items" group="hoge">
  <template v-slot:prepend="{ item }">
    <v-icon>mdi-file</v-icon>
  </template>
  <template v-slot:label="{ item }">
    <span class="primary--text">{{ item.name }}</span>
  </template>
  <template v-slot:append="{ item }">
    <template
            v-if="item.children != null && item.children.length > 0"
    >
      has {{ item.children.length }} children
    </template>
  </template>
</v-draggable-treeview>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
    }
  }
}
</script>

API

Currently, this component dose not support all original v-treeview component's props, slots, event.

Props

Name Type Default Description
value Object [] items for treeview. item-key, item-text, item-children are not customizable currently. value can be like { id: 1, name: "test", children: []} .
group string null group name for vuedraggable. If this props not provided, drag and drop are enabled only in children.
expand-icon string 'mdi-menu-down' mdi string for the expand icon.

Events

Name Value Description
input array Emits the array of selected items when this value changes

Slots

Name Props Description
append { item: any, open: boolean } Appends content after label
label { item: any, open: boolean } Label content
prepend { item: any, open: boolean } Prepends content before label

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
vue (4,206
drag-and-drop (131
vuetify (64
treeview (33