Question

我遇到了使用dragula进行vuetify数据表工作的问题。我正在使用包装器vue2-dragula。

这是一个演示问题的小提琴，虽然我本身无法进行拖拽工作

在我的电脑上，它按预期工作。唯一的问题是数据表列alingment如果你看第一个表，我们松散标题/数据对齐，因为我在模板和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>

所以我想在表格模板和表格行之间添加一些东西是禁止的。但这是我发现使拖拉指令工作的唯一方法。该指令必须是可拖动元素（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

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

return 10 * log10(maxLev)

查看vue-dragula自述文件页面，[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>)应该指向数据集合，而不是元素，所以我认为它将是

v-dragula="..."

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

BTW，<template slot="items" scope="props" v-dragula="items" drake="first" class="container">而不是<template>是首选，因为<div>对内部代码很敏感（尽管可能期望Vuetify管理该问题）。

vuetify data-table + dragula

1 个答案: