3

我正在尝试通过以下文章将 vue-draggable 与 Vuetify v-data-table 一起使用： https ://medium.com/vuetify/drag-n-drop-in-vuetify-part-ii-2b07b4b27684

它说：“主要目标是将表格的 tbody 设置为可拖动组件，这是不可能的，因为 Vuetify 使用模板作为渲染项目的插槽。”

在那之后，这个家伙找到了一个使用 Sortable JS 的解决方案。我试过了，但它不工作。

出现此错误：Sortable: el must be an HTMLElement, not [object Function]。

人们说 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);
            }
        });
    }
4

1 回答 1

0

我正在使用带有 Nuxt 的 SortableJS。我找到的最短的解决方案是注册一个指令Vue.directive：

import Vue from 'vue'
import {Sortable} from 'sortablejs';
Vue.directive("sortableDataTable", {
  bind(el, binding, vnode) {
    const options = {
      animation: 150,
      onUpdate(event) {
        vnode.child.$emit('sorted', event)
      }
    }
    Sortable.create(el.getElementsByTagName('tbody')[0], options)
  }
})

现在我可以v-sortable-data-table在 a 中使用该指令v-data-table：

  <v-data-table
    v-sortable-data-table
    :items="items"
    :headers="headers"
    item-key="id"
  >
  </v-data-table>

请注意，该指令已注册为sortableDataTable但用作v-sortable-data-table（camelCase 转换为 kebab-case 并且在使用时必须以'v-'为前缀）。

于 2022-02-25T10:02:53.053 回答