Question

我正在尝试对Vuetify Treeview和数据表进行拖放。似乎不完全支持它，但是在this thread中描述了一种解决方法。但是，解决方法尚未完成。如果有人为此创建了代码笔或类似的东西，也许社区会受益吗？

让我感到困惑的是，创建了组件DragDropSlot.vue，但是在代码中使用了“拖放式插槽”。还有一个“ _.cloneDeep（this.tree）”调用，其中未定义_。我认为应该用某些东西代替它。当我发表评论时，拖放仍然无法正常工作。可能错过了一些类似于定义数据的东西。不确定正确的数据类型。这似乎是基于我没有处理过的反应。刚刚开始学习vue和vuetify。

我愿意就如何解决这个问题提出任何建议。

祝一切顺利

Answer 1

我将V-Treeview与Vue.Draggable（https://github.com/SortableJS/Vue.Draggable）一起使用。我使用直接链接。

<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0 vuedraggable.umd.min.js"/>
<v-treeview
:active.sync="active"
:items="users"
:search="search"
item-key="Id"
item-text="UserName"
item-children="Children"
:open.sync="open"
activatable
color="warning"
dense
transition
return-object
>
<template v-slot:label="{ item }">
<draggable :list="users" group="node" :id="item.Id" :data-parent="item.ParentId" @start="checkStart" @end="checkEnd"    >
    <label>
        <i class="fas fa-user mr-3" />
        <span id="item.id" >{{item.UserName}}</span>
    </label>  
</draggable>

我也将ParentId属性添加到项目树模型： { ID：1，用户名：“ John Doe”， ParentId：null，子代：[{Id：2，ParentId：1，...}] }
然后，我使用开始事件和结束事件，在其中我从中拖动项目来搜索父起始节点，并在放置项目时搜索父结束节点。当parent为null时，该项目为根。

new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        components: {
            vuedraggable
        },
        data() {
            return {
                active: [],
                open: [],
                users: [],
                selectedItems: [],
            }
        },
        mounted: function () {
            this.fetchUsers();
        },
        methods: {
            findTreeItem: function (items, id) {
                if (!items) {
                    return;
                }
                for (var i = 0; i < items.length; i++) {
                    var item = items[i];
                    // Test current object
                    if (item.Id === id) {
                        return item;
                    }
                    // Test children recursively
                    const child = this.findTreeItem(item.Children, id);
                    if (child) {
                        return child;
                    }
                }
            },
            checkStart: function (evt) {
                var self = this;
                self.active = [];
                self.active.push(self.findTreeItem(self.users, evt.from.id))
            },
            checkEnd: function (evt) {
                var self = this;
                var itemSelected = self.active[0];
                var fromParent = itemSelected.ParentId ? self.findTreeItem(self.users, itemSelected.ParentId) : null;
                var toParent = self.findTreeItem(self.users, evt.to.id);
                var objFrom = fromParent ? fromParent.Children : self.users;
                objFrom.splice(objFrom.indexOf(itemSelected), 1);

                if (toParent.Id === itemSelected.Id) {
                    itemSelected.ParentId = null;
                    self.users.push(itemSelected);
                }
                else {
                    itemSelected.ParentId = toParent.Id;
                    toParent.Children.push(itemSelected);
                }
                self.saveUser(itemSelected);
                //   self.active = [];
                return false;
            },
            fetchUsers: function () {
                //load from api
            },
            saveUser: function (user) {
                //save 
            },

        },
        computed: {
            selected() {
                if (!this.active.length) return undefined
                return this.active[0];
            },
        }
    })

希望我能帮助您。 IngD。

Answer 2

找到了这个组件。

https://vuejsexamples.com/vuetify-draggable-v-treeview-component/

我没有亲自尝试（因为它的选项太少了），但是在演示中看起来效果很好。

无论如何，只是尝试

Answer 3

经过一些额外的工作，我最终使用此库在vuetify树视图和数据表的顶部实现了拖放操作：

https://www.vuetoolbox.com/projects/vue-drag-drop

起初，我研究了可拖动对象和类似对象，但意识到它始终基于将元素从位置A移到位置B。我需要更多控制。例如，我希望元素在拖放到某些放置区域时消失。

Vuetify TreeView +拖放

3 个答案: