javascript - 如何在带有 Vuetify 2 和 Vue JS 2 的 v-data-table 中使用 vue-draggable(或 Sortable JS)?
问题描述
我正在尝试通过以下文章将 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); } }); }
解决方案
我正在使用带有 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-'为前缀)。
推荐阅读
- c++ - 不正确的模板专业化
- c++ - 尝试使用 init() 启动我的程序,但它告诉我没有合适的默认构造函数可用
- inno-setup - 有没有办法防止使用 SignTool 删除签名?
- javascript - 如何组合两个具有相同父对象的嵌套父对象javascript数组?
- swift - Swift继承函数返回类型不能是子类型
- spring - spring-boot 对 context-path/ 的请求为静态内容生成 405 Method Not Allowed 错误
- javascript - 仅当javascript中的输入字符串未提供时如何应用默认时区?
- ios - 为什么将preferredLayoutAttributesFitting 和systemLayoutSizeFitting 与自定尺寸集合视图单元一起使用
- node.js - node-fetch 将帖子正文作为表单数据发送
- html - 导航栏上的问题 - 单击时切换栏不显示页面