问题描述
对于使用VueJS编码的应用程序，我必须获得与文件夹中的Windows资源管理器相同的行为。 我会解释： 在该项目中，我们有一个v数据表，该表列出了用户在远程服务器上创建的所有文件夹，并使用API处理了后面的所有管理工作。
我希望能够将选定的文件夹/文件拖放到数据表中，并将它们放到数据表中的另一个文件夹中（一旦完成，将调用API来处理操作，这没什么大不了的）。我的问题是我无法在前面弄清楚该怎么做。
这是我组件的代码：
<template>
<v-app>
<v-main>
<v-container fluid>
<v-row align-content="stretch">
<v-col>
<drag
:data="selected"
@dragenter="moveFolder"
@cut="checkItem(selected)"
>
<v-data-table
v-model="selected"
:headers="headers"
:items="items"
item-key="id"
show-select
>
</v-data-table>
<template v-slot:drag-image>
<v-badge color="red" style="transform: translate(10px,5px)">
<template v-slot:badge>{{ selected.length }}</template>
<v-icon large color="primary">fas fa-folder</v-icon>
</v-badge>
</template>
<template v-slot:body="{ items }">
<tbody>
<tr v-for="(item,index) in items" :key="index">
<drop @drop="moveFolder(selected,item)">
<td>{{ item.name }}</td>
<td>{{ item.updated_on }}</td>
</drop>
</tr>
</tbody>
</template>
</drag>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
<script>
import { Drag,Drop } from 'vue-easy-dnd';
export default {
name: 'DraggableDataTable',components: {
Drag,Drop,},props: {
items: Array,headers: Array,data: () => ({
selected: [],}),methods: {
moveFolder(selected,item) {
console.log(selected,item,'toto');
},checkItem(item) {
console.log(item);
},};
</script>
我正在使用easy-dnd来做到这一点。 https://www.npmjs.com/package/vue-easy-dnd
我的问题是： 当我不在数据表中的模板上使用v型槽时：
<template>
<tbody>
<tr v-for="(item,index) in items" :key="index">
<drop @drop="moveFolder(selected,item)">
<td>{{ item.name }}</td>
<td>{{ item.updated_on }}</td>
</drop>
</tr>
</tbody>
</template>
我有2个数据表，这很正常，因为它没有集成到v数据表中。正如您在控制台上看到的那样，此后，我成功获取了我需要调用API的信息（选定的行以及删除选定文件夹的行）。请注意，我需要将选择的项目放在第二个“数据表”中，这是预期的行为，因为它没有“集成”到v数据表中，并且需要在第二个数据表（未格式化的数据表）中完成删除操作
当我尝试将其集成到v-datatable中时，如下所示：
<template v-slot:body="{ items }">
<tbody>
<tr v-for="(item,index) in items" :key="index">
<drop @drop="moveFolder(selected,item)">
<td>{{ item.name }}</td>
<td>{{ item.updated_on }}</td>
</drop>
</tr>
</tbody>
</template>
我得到这个： with the v-slot
在这里，我没有第二个数据表（再次正常）。 事实是，拖动系统工作正常，但放置系统无效。如您所见，将选定的文件夹拖放到另一个文件夹后，什么也没做（console.log未显示其面孔：））。
是的，当我检查元素时，我在数据表上有拖动类，但是没有来自easy-dnd组件的放置类：
<div data-v-15f89b5d="" data-v-5780bd59="" class="drag-source drag-out" style="cursor: grab;">
<div data-v-5780bd59="" class="v-data-table theme--light" data-v-15f89b5d="">
<div class="v-data-table__wrapper">
<table>
<colgroup>
<col class="">
<col class="">
<col class="">
<col class="">
<col class="">
<col class="">
</colgroup>
<thead class="v-data-table-header">
<tr>
<th role="columnheader" scope="col" aria-label="" class="text-start" style="width: 1px; min-width: 1px;">
<div class="v-data-table__checkBox v-simple-checkBox">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon notranslate fas fa-minus-square theme--light"></i>
</div>
</th>
<th role="columnheader" scope="col" aria-label="" class="text-start" style="width: 3rem; min-width: 3rem;"><span></span></th>
<th role="columnheader" scope="col" aria-label="Name: Not sorted. Activate to sort ascending." aria-sort="none" class="text-start sortable"><span>Name</span><i aria-hidden="true" class="v-icon notranslate v-data-table-header__icon fas fa-sort-up theme--light" style="font-size: 18px;"></i></th>
<th role="columnheader" scope="col" aria-label="Last Modified: Not sorted. Activate to sort ascending." aria-sort="none" class="text-start sortable"><span>Last Modified</span><i aria-hidden="true" class="v-icon notranslate v-data-table-header__icon fas fa-sort-up theme--light" style="font-size: 18px;"></i></th>
<th role="columnheader" scope="col" aria-label="Nb of files: Not sorted. Activate to sort ascending." aria-sort="none" class="text-start sortable"><span>Nb of files</span><i aria-hidden="true" class="v-icon notranslate v-data-table-header__icon fas fa-sort-up theme--light" style="font-size: 18px;"></i></th>
<th role="columnheader" scope="col" aria-label="Size: Not sorted. Activate to sort ascending." aria-sort="none" class="text-start sortable"><span>Size</span><i aria-hidden="true" class="v-icon notranslate v-data-table-header__icon fas fa-sort-up theme--light" style="font-size: 18px;"></i></th>
</tr>
</thead>
<tbody>
<tr class="v-data-table__selected">
<td class="text-start">
<div class="v-data-table__checkBox v-simple-checkBox">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon notranslate fas fa-check-square theme--light"></i>
</div>
</td>
<td class="text-start"></td>
<td class="text-start">Folder 6</td>
<td class="text-start">2020-08-27T08:13:42.999225</td>
<td class="text-start"></td>
<td class="text-start"></td>
</tr>
<tr class="v-data-table__selected">
<td class="text-start">
<div class="v-data-table__checkBox v-simple-checkBox">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon notranslate fas fa-check-square theme--light"></i>
</div>
</td>
<td class="text-start"></td>
<td class="text-start">Folder 7</td>
<td class="text-start">2020-08-27T08:13:46.436984</td>
<td class="text-start"></td>
<td class="text-start"></td>
</tr>
<tr class="">
<td class="text-start">
<div class="v-data-table__checkBox v-simple-checkBox">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon notranslate far fa-square theme--light"></i>
</div>
</td>
<td class="text-start"></td>
<td class="text-start">Folder 8</td>
<td class="text-start">2020-08-27T08:13:49.591516</td>
<td class="text-start"></td>
<td class="text-start"></td>
</tr>
<tr class="">
<td class="text-start">
<div class="v-data-table__checkBox v-simple-checkBox">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon notranslate far fa-square theme--light"></i>
</div>
</td>
<td class="text-start"></td>
<td class="text-start">Folder 12</td>
<td class="text-start">2020-08-27T08:14:04.598654</td>
<td class="text-start"></td>
<td class="text-start"></td>
</tr>
<tr class="">
<td class="text-start">
<div class="v-data-table__checkBox v-simple-checkBox">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon notranslate far fa-square theme--light"></i>
</div>
</td>
<td class="text-start"></td>
<td class="text-start">new folder</td>
<td class="text-start">2020-09-10T12:27:03.581098</td>
<td class="text-start"></td>
<td class="text-start"></td>
</tr>
<tr class="">
<td class="text-start">
<div class="v-data-table__checkBox v-simple-checkBox">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon notranslate far fa-square theme--light"></i>
</div>
</td>
<td class="text-start"></td>
<td class="text-start">new folder 2</td>
<td class="text-start">2020-09-10T12:28:02.730328</td>
<td class="text-start"></td>
<td class="text-start"></td>
</tr>
<tr class="">
<td class="text-start">
<div class="v-data-table__checkBox v-simple-checkBox">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon notranslate far fa-square theme--light"></i>
</div>
</td>
<td class="text-start"></td>
<td class="text-start">new folder 3</td>
<td class="text-start">2020-09-10T12:30:55.961826</td>
<td class="text-start"></td>
<td class="text-start"></td>
</tr>
<tr class="">
<td class="text-start">
<div class="v-data-table__checkBox v-simple-checkBox">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon notranslate far fa-square theme--light"></i>
</div>
</td>
<td class="text-start"></td>
<td class="text-start">new folder 4</td>
<td class="text-start">2020-09-10T12:31:29.826987</td>
<td class="text-start"></td>
<td class="text-start"></td>
</tr>
<tr class="">
<td class="text-start">
<div class="v-data-table__checkBox v-simple-checkBox">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon notranslate far fa-square theme--light"></i>
</div>
</td>
<td class="text-start"></td>
<td class="text-start">test</td>
<td class="text-start">2020-09-10T12:32:00.026499</td>
<td class="text-start"></td>
<td class="text-start"></td>
</tr>
<tr class="">
<td class="text-start">
<div class="v-data-table__checkBox v-simple-checkBox">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon notranslate far fa-square theme--light"></i>
</div>
</td>
<td class="text-start"></td>
<td class="text-start">test 2</td>
<td class="text-start">2020-09-10T12:35:02.202332</td>
<td class="text-start"></td>
<td class="text-start"></td>
</tr>
</tbody>
</table>
</div>
<div class="v-data-footer">
<div class="v-data-footer__select">
Rows per page:
<div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--is-booted v-select">
<div class="v-input__control">
<div role="button" aria-haspopup="listBox" aria-expanded="false" aria-owns="list-53" class="v-input__slot">
<div class="v-select__slot">
<div class="v-select__selections">
<div class="v-select__selection v-select__selection--comma">10</div>
<input aria-label="$vuetify.dataTable.itemsPerPageText" id="input-53" readonly="readonly" type="text" aria-readonly="false" autocomplete="off">
</div>
<div class="v-input__append-inner">
<div class="v-input__icon v-input__icon--append"><i aria-hidden="true" class="v-icon notranslate fas fa-caret-down theme--light"></i></div>
</div>
<input type="hidden" value="10">
</div>
<div class="v-menu">
<!---->
</div>
</div>
</div>
</div>
</div>
<div class="v-data-footer__pagination">1-10 of 23</div>
<div class="v-data-footer__icons-before"><button type="button" disabled="disabled" class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default" aria-label="PrevIoUs page"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate fas fa-chevron-left theme--light"></i></span></button></div>
<div class="v-data-footer__icons-after"><button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default" aria-label="Next page"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate fas fa-chevron-right theme--light"></i></span></button></div>
</div>
</div>
<div data-v-15f89b5d="" class="__drag-image"><span data-v-5780bd59="" class="v-badge theme--light" data-v-15f89b5d="" style="transform: translate(10px,5px);"><i data-v-5780bd59="" aria-hidden="true" class="v-icon notranslate fas fa-folder theme--light primary--text" style="font-size: 36px;"></i><span class="v-badge__wrapper"><span aria-atomic="true" aria-label="Badge" aria-live="polite" role="status" class="v-badge__badge red" style="bottom: calc(100% - 4px); left: calc(100% - 4px); right: auto; top: auto;">2</span></span></span></div>
</div>
看来，数据表甚至都没有去读取放置组件或类似的东西……（对不起，语义） 我还尝试将'tr'包装在'drop'组件中……不起作用。
那么，在这种拖放操作中如何获得所需的行为？是否可以通过将v-datatable原生vuejs组件与easy-dnd结合使用来做到这一点？
已经感谢您的时间，希望您不会对此感到头疼：）
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）