vuetify数据表+ dragula

我有做vuetify DataTable的工作，dragula问题。我正在使用包装vue2-dragula。vuetify数据表+ dragula

下面是说明问题，虽然我没能做出dragular工作本身

在我的电脑工作如预期的小提琴。唯一的问题是数据表列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>

，所以我想将东西表模板之间表行是一个不行。但这是我发现制作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>

来源

2017-10-12 Benoit Aspirault

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

[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="..."应指向数据收集，不是元素，所以我想它会be

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

这可能会让你更进一步。第二张桌子在拖动时显示一个图标，但现在还没有这样做，我不知道为什么。如果我有更多的线索，我会更新。

BTW，<template>代替<div>是首选，因为<table>是神经过敏的内部变量（尽管可能希望Vuetify来管理这个问题）。

来源

2017-10-12 02:30:46

vuetify数据表+ dragula

回答

相关问题