这是我正在使用的 CodePen:https://codepen.io/NathanWailes/pen/rNLajYO https://codepen.io/NathanWailes/pen/rNLajYO
It uses:
- Vue 2.x
- 虚拟化 2.3.13
-
Sortable https://github.com/SortableJS/sortablejs1.10.2(因此,如果您还没有安装/导入它,则需要安装/导入)
它基于以下答案这个 GitHub 问题 https://github.com/vuetifyjs/vuetify/issues/2234.
这是代码:
<div id="app">
<v-app>
<v-data-table
:headers="headers"
:items="desserts"
v-sortable-data-table
@sorted="saveOrder"
item-key="name"
></v-data-table>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert',
align: 'start',
sortable: false,
value: 'name',
},
],
desserts: [
{
name: 'Frozen Yogurt',
},
{
name: 'Ice cream sandwich',
},
{
name: 'Eclair',
},
{
name: 'Cupcake',
},
{
name: 'Gingerbread',
},
],
}
},
methods: {
saveOrder (event) {
const movedItem = this.desserts.splice(event.oldIndex, 1)[0];
this.desserts.splice(event.newIndex, 0, movedItem);
}
},
directives: {
sortableDataTable: {
bind (el, binding, vnode) {
const options = {
animation: 150,
onUpdate: function (event) {
vnode.child.$emit('sorted', event)
}
}
Sortable.create(el.getElementsByTagName('tbody')[0], options)
}
}
},
})