vuetify 数据表 + dragula答案

【问题标题】：vuetify data-table + dragulavuetify 数据表 + dragula
【发布时间】：2018-03-23 19:39:14
【问题描述】：

我在使 vuetify 数据表与 Dragula 一起工作时遇到问题。我正在使用包装器 vue2-dragula。

这是一个演示问题的小提琴，尽管我本身无法进行拖动工作

在我的计算机上，它按预期工作。唯一的问题是数据表列对齐，如果您查看第一个表，我们会松动标题/数据对齐，因为我在模板和 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">

我正在寻找的是一个看起来像小提琴中的第二个但使用 dragula 指令工作的表。有人有想法吗？我是一个没有真正编程学位的初学者，所以这可能是愚蠢的，如果是的话，请提前抱歉:)

谢谢。

更多信息：

这不起作用：

<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>

【问题讨论】：

标签： vuejs2 dragula vuetify.js

【解决方案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 来解决这个问题）。

【讨论】：