https://github.com/suusan2go/vuetify-draggable-treeview
Vuetify draggable v-treeview component
https://github.com/suusan2go/vuetify-draggable-treeview
drag-and-drop treeview vue vuetify
Last synced: about 1 year ago
JSON representation
Vuetify draggable v-treeview component
- Host: GitHub
- URL: https://github.com/suusan2go/vuetify-draggable-treeview
- Owner: suusan2go
- License: mit
- Created: 2019-11-28T08:24:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-11-02T14:14:07.000Z (over 2 years ago)
- Last Synced: 2025-04-09T16:08:45.240Z (about 1 year ago)
- Topics: drag-and-drop, treeview, vue, vuetify
- Language: Vue
- Homepage: https://v-draggable-treeview.netlify.com/
- Size: 2.55 MB
- Stars: 90
- Watchers: 2
- Forks: 36
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/suusan2go/vuetify-draggable-treeview/actions)
[](https://badge.fury.io/js/vuetify-draggable-treeview)
# vuetify-draggable-treeview
Drag and drop `v-treeview` (Vuetify Treeview) component.
[Live Demo](https://v-draggable-treeview.netlify.com/)
## 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
### Basic Example
```vue
export default {
data() {
return {
items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
}
}
}
```
### Drag and drop only in children.
```vue
export default {
data() {
return {
items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
}
}
}
```
### Using slot
```vue
mdi-file
{{ item.name }}
has {{ item.children.length }} children
export default {
data() {
return {
items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
}
}
}
```
## 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