Drag and drop v-treeview (Vuetify Treeview) component.
yarn add vuetify-draggable-treeview
// @NOTE: This component requires vue, vuetify, vuedraggable as peerDependency.
yarn add vuedraggableimport VuetifyDraggableTreeview from 'vuetify-draggable-treeview'
Vue.use(VuetifyDraggableTreeview)
// or manually import
VuetifyDraggableTreeview
export default Vue.extend({
components: {
VuetifyDraggableTreeview
}
})<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><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><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>Currently, this component dose not support all original v-treeview component's props, slots, event.
| 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. |
| Name | Value | Description |
|---|---|---|
| input | array | Emits the array of selected items when this value changes |
| 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 |
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent