Vuetify的可拖动树视图组件

Vuetify的可拖动树视图组件
插件名称 vuetify-draggable-treeview
发布时间 2020年7月17日
插件作者 suusan2go

Vuetify框架的树视图组件,允许用户通过拖放来重新排序父级和子级节点。

变更日志:

v0.0.6(09/11/2020)

  • 功能/更改展开图标

v0.0.5(08/08/2020)

  • 修复子节点无法使用的标签槽

安装和下载:

# Yarn
$ yarn add vuedraggable

# NPM
$ npm i vuedraggable --save

基本用法:

1.安装并导入组件。

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

2.将可拖动树视图组件添加到模板。

<template>
  <v-draggable-treeview
    group="example"
    v-model="items"
  ></v-draggable-treeview>
</template>

3.将节点添加到树视图。

export default {
  data() {
    return {
      items: [{ id: 1, name: "node-1", children: [{ id:11, name: "node1-1" }] }]
    }
  }
}