2017-10-12 6 views
0

ドラッグツールで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> 

答えて

0

フィドルのコンソールが警告VUE-dragulaのREADMEページを見てみると

[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="..."は、データ収集、ない要素を指している必要がありますので、私はそれをすると仮定しますbe

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

これはもう少しあなたを得るかもしれません。ある時点で、2番目のテーブルはドラッグ時にアイコンを表示していましたが、今はそうしていません。理由はわかりません。さらなる手がかりが得られたら、私は更新します。

<div>の代わりに<template>が好ましく、<table>は、内部タグについてのものです(ただし、Vuetifyでその問題を管理することが期待されます)。

関連する問題