vuetify-draggable-treeview

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

Live Demo

!v-treeview

Installation

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

Setup

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

// or manually import
VuetifyDraggableTreeview

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

`

Usage

$3


`vue


`

$3


`vue


`

$3


`vue


`

API


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

$3

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.

$3

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

$3

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