vuetify-draggable-treeview

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

vuetify-draggable-treeview

Installation

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

Setup

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

// or manually import
VuetifyDraggableTreeview

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

Ts

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>
Vue

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>
Vue

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>
Vue

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

Vuetify draggable v-treeview componentRead More

Latest commit to the master branch on 11-2-2023
Download as zip