Как использовать vue -draggable (или Sortable JS) в v-data-таблице с Vuetify 2 и Vue JS 2? - PullRequest
Новая
       21

Как использовать vue -draggable (или Sortable JS) в v-data-таблице с Vuetify 2 и Vue JS 2?

1 голос
/ 07 апреля 2020

Я пытаюсь использовать vue -draggable с Vuetify v-data-table, следуя этой статье: https://medium.com/vuetify/drag-n-drop-in-vuetify-part-ii-2b07b4b27684

В нем говорится: «Основная цель состояла в том, чтобы установить tbody таблицы как перетаскиваемый компонент, и это было невозможно, потому что Vuetify использует шаблон в качестве слота для рендеринга элементов. "

После этого парень нашел решение с помощью Sortable JS. Я пробовал, но это не работает.

появляется эта ошибка: Сортируемый: el должен быть HTMLElement, а не [функция объекта].

Люди говорят, что Sortable JS не работает для Vue JS 2. ..

Как я могу это сделать?

Если у вас есть решение, пожалуйста, дайте мне знать:)

Мой код: 

    <v-data-table
      :headers="headers"
      :items="slots"
      :items-per-page="-1"
      ref="sortableTable"
    >
      <template v-slot:item="props">
        <tr v-if="props.item.recipe" class="sortableRow">
          <td style="text-align: center">{{props.item.slot}}</td>
          <td style="text-align: center" v-if="props.item.recipe.preferences">
            <v-chip
            v-for="pref in props.item.recipe.preferences"
            :key="pref"
            small
          >
            {{ pref }}
          </v-chip>
          </td>
          <td style="text-align: center">{{props.item.recipe.protein}}</td>
          <td style="text-align: center">{{props.item.recipe.protein_cut}}</td>
          <td style="text-align: center">{{props.item.recipe.carb}}</td>
          <td style="text-align: center" v-if="props.item.recipe.tags">
            <v-chip
              v-if="props.item.recipe.tags.indexOf('c3_appropriate') !== -1"
              small
              color="success"
              text-color="white"
            >
              C3
            </v-chip>
          </td>
          <td style="text-align: center">{{props.item.recipe.ready_in}}</td>
          <td style="text-align: center">
            <v-chip
              small
              :color="props.item.recipe.new_repeat === 'repeat' ? 'error' : 'success'"
            >
              {{ props.item.recipe.new_repeat }}
            </v-chip>
          </td>
          <td style="text-align: center">
            {{ props.item.recipe.title + ' ' }}
            <span
              v-if="props.item.recipe.subtitle"
              style="font-size: 11px"
            >
                <br>
                {{ props.item.recipe.subtitle }}
              </span>
          </td>
        </tr>
        <tr v-else>
          <td style="text-align: center">{{props.item.slot}}</td>
        </tr>

      </template>
    </v-data-table>


mounted() {

        let table = document.querySelector("table tbody");
        console.log(table)
        const _self = this;
        Sortable.create(table, {
            draggable: '.sortableRow',
            handle: ".handle",
            onEnd({newIndex, oldIndex}) {
                const rowSelected = _self.slots.splice(oldIndex,1)[0];
                _self.slots.splice(newIndex, 0, rowSelected);
            }
        });
    }
...