vuetify таблица данных + перетаскивание

У меня проблема с тем, чтобы vuetify datatable работал с dragula. Я использую обертку vue2-dragula.

Вот скрипка, которая демонстрирует проблему, хотя я не мог сделать перетягивающую работу как таковую.

https://jsfiddle.net/Lscqm9je/

На моем компьютере он работает как задумано. Единственная проблема - это сопоставление столбцов с данными, если вы посмотрите на первую таблицу, мы потеряем выравнивание заголовка / данных, потому что я добавил div между шаблоном и tr.

<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>

vuetify.js vuejs2 dragula
person Benoit Aspirault    schedule 12.10.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Консоль на скрипке выдает предупреждение

[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>)

Глядя на страницу readme vue-dragula, v-dragula="..." должен указывать на сбор данных, а не на элемент, поэтому я предполагаю, что это будет

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

Это может продвинуть вас немного дальше. В какой-то момент вторая таблица показывала значок при перетаскивании, но сейчас этого не происходит, я не уверен, почему. Если я получу какие-то дополнительные подсказки, я обновлюсь.

Кстати, <template> вместо <div> предпочтительнее, поскольку <table> щепетильно относится к внутренним тегам (хотя можно ожидать, что Vuetify решит эту проблему).

person Richard Matsen    schedule 12.10.2017