Vuetify TreeView +拖放 [英] Vuetify TreeView + Drag and drop
问题描述
我正在尝试对Vuetify Treeview和数据表进行拖放.似乎不完全支持它，但是此线程中描述了一种解决方法.但是，解决方法尚未完成.如果有人为此创建了代码笔或类似的东西，也许社区会受益吗?
I am trying to implement drag and drop on Vuetify Treeview and data table. It seems like it is not supported fully but a workaround is described in this thread. The workaround is however not complete. Perhaps the community would benefit if someone created a codepen or similar on this?
让我感到困惑的是，虽然创建了组件DragDropSlot.vue，但是在代码中使用了"drag-drop-slot".还有一个"_.cloneDeep(this.tree)"调用，其中未定义_.我认为应该用某些东西代替它.当我发表评论时，拖放仍然无法正常工作.可能错过了一些类似于定义数据的东西.不确定正确的数据类型.这似乎是基于我没有处理过的反应.刚刚开始学习vue和vuetify.
What confuses me is that the component DragDropSlot.vue is created but "drag-drop-slot" is used in the code. Also there is a "_.cloneDeep(this.tree)" call where _ is not defined. I assume it should be replaced by something. When I comment that out drag and drop does still not work. Probably missed something more like defining data. Not sure of correct data types. It seems to be based on react which I have not worked with. Have just started to learn vue and vuetify.
我愿意就如何解决这个问题提出任何建议.
I'm open for any suggestion for how to solve this.
祝一切顺利
推荐答案
I use V-Treeview with Vue.Draggable (https://github.com/SortableJS/Vue.Draggable). I use direct link.
<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时，该项目为根.
Also I add ParentId property to item tree model:
{
Id:1,
UserName: "John Doe",
ParentId: null,
Children:[{Id:2, ParentId: 1,...}]
}
Then I use start and end events where I search parent start node from I drag the item and parent end node where I drop the item. When parent is null the item is a root.
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.
Hope I help you. IngD.
这篇关于Vuetify TreeView +拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
