vuetify-draggable-treeview

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

vuetify-draggable-treeview

View demo View Github

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.

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

GitHub