在 Vuetify v-data-table 中拖动列

问题描述

我想在 v-data-table 中通过标题拖动列.我已经使用指令/sortablejs 走得很远了，但我无法弄清楚以下几点:

I would like to drag columns by their headers in a v-data-table. I have gotten pretty far using directives/sortablejs, but I have trouble figuring out the following:

• 我不确定如何解释 列的数量与 列的数量不匹配的情况.使用 colspan="someNumber" 时可能会发生这种情况
• 添加新行后，将列拖到新位置时，它不会同步到正确的列.

任何帮助/见解将不胜感激！

Any help/insight would be appreciated!

我在以下位置有此设置的代码笔:https://codepen.io/uglyhobbitfeet/pen/NWWKVza

I have a codepen of this setup at:https://codepen.io/uglyhobbitfeet/pen/NWWKVza

codepen 最重要的部分是:

The most important parts of the codepen are:

<v-data-table v-sortable-table

和

directives: {
  'sortable-table': {
    ...
  }
}

推荐答案

通过使用数据表上的键和自定义 onEnd 方法，我走了一条稍微不同的路线.工作代码在这里:

I went a slightly different route by using a key on the data-table and a custom onEnd method. Working code is here:

https://codepen.io/uglyhobbitfeet/pen/ExxaNGO

<v-data-table :headers="headers" :items="desserts"
  sort-by="calories"
  v-sortable-table="{onEnd:sortTheHeadersAndUpdateTheKey}"
  :key="anIncreasingNumber" >

这篇关于在 Vuetify v-data-table 中拖动列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！