vuetify-draggable-treeview
Drag and drop v-treeview
(Vuetify Treeview) component.
Live Demo
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 |