虚拟数据表+ dragula

Question

我在使用dragula使vuetify工作时遇到了问题。我用的是包装vue2-dragula。

这里有一个小提琴，它证明了这个问题，虽然我不能使拖拉的工作本身

https://jsfiddle.net/Lscqm9je/

在我的电脑上，它按预期工作。唯一的问题是datatable列的分配(如果您查看第一个表)，我们会松散头/数据对齐，因为我在模板和tr之间添加了一个div。

<v-data-table  v-bind:headers="headers" v-bind:items="items" hide-actions>
              <template slot="items" scope="props">
                <tbody v-dragula="tr" drake="first" class="container">
                  <tr>
                    <td class="text-xs-right">{{ props.item.round }}</td>
                    <td class="text-xs-right">{{ props.item.cat }}</td>
                    <td class="text-xs-right">{{ props.item.p1 }}</td>
                    <td class="text-xs-right">{{ props.item.p2 }}</td>
                    <td class="text-xs-right">{{ props.item.statut }}</td>
                  </tr>
                </tbody>
              </template>
            </v-data-table> 

所以我想在表格模板和表行之间放点东西是不可能的。但这是我找到的唯一让dragula指令起作用的方法。指令必须是可拖放元素( tr )的直接父级。我还试图将指令放入模板标记中，但这似乎是不可能的。

<template slot="items" scope="props" v-dragula="tr" drake="first" class="container">

我要找的是一张桌子，看上去像小提琴中的第二把，但有了德拉古拉的指令就行了。有人有主意吗？我是一个初学者，没有真正的编程学位，所以这可能是愚蠢的事情，如果是的话，提前道歉:)

谢谢。

更多信息：

--这不起作用:

<template slot="items" scope="props" v-dragula="tr" drake="first" class="container">
                  <tr>
                    <td class="text-xs-right">{{ props.item.round }}</td>

此工作，但单元格是单独拖动的，而不是整行。

<template slot="items" scope="props">
                  <tr v-dragula="tr" drake="first" class="container">
                    <td class="text-xs-right">{{ props.item.round }}</td> 

Answer 1

小提琴上的控制台发出警告

[Vue warn]: Property or method "tr" is not defined on the instance but referenced during render. 
Make sure to declare reactive data properties in the data option.
(found in <Root>)

查看vue-dragula自述页面，v-dragula="..."应该指向数据收集，而不是元素，因此我假设

<template slot="items" scope="props" v-dragula="items" drake="first" class="container">

这可能会让你走得更远。有一次，第二个表在拖动时显示了一个图标，但它现在没有这样做，我不知道为什么。如果我有任何进一步的线索，我会更新的。

顺便说一句，<template>而不是<div>是首选的，因为<table>对内部标签很敏感(尽管可能会期望Vuetify来处理这个问题)。