ドラッグツールでvuetifyデータテーブルを作成する際に問題があります。私はラッパーvue2-dragulaを使用しています。私が意図したとおり、それが働いてそれ自体が自分のコンピュータ上でvuetifyデータテーブル+ドラッグツール
https://jsfiddle.net/Lscqm9je/
dragular仕事をすることができませんでしたがここで
は、問題を示すフィドルです。あなたが最初のテーブルの上に見れば唯一の問題は、私は、テンプレートとTRの間にdiv要素を追加したので、私たちは、ヘッダ/データ・アラインメントを失うデータテーブルのカラムalingmentあるので、私はテーブルテンプレートとの間で何かを入れ推測
<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">
私が探しているのは、フィドルで2番目のように見える表ですが、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>