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: 5 days 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 (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-11-02T14:14:07.000Z (over 1 year ago)
• Last Synced: 2025-02-07T05:07:41.224Z (14 days ago)
• Topics: drag-and-drop, treeview, vue, vuetify
• Language: Vue
• Homepage: https://v-draggable-treeview.netlify.com/
• Size: 2.55 MB
• Stars: 90
• Watchers: 3
• Forks: 36
• Open Issues: 48
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Actions Status](https://github.com/suusan2go/vuetify-draggable-treeview/workflows/test/badge.svg)](https://github.com/suusan2go/vuetify-draggable-treeview/actions)

[![npm version](https://badge.fury.io/js/vuetify-draggable-treeview.svg)](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/)

![v-treeview](https://user-images.githubusercontent.com/8841470/70327688-b6ca2800-187a-11ea-907e-79d7dc3afca9.gif)

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