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

回答

相關問題