拖动 Vuetify v-data-table 中的列

我想在 v-data-table 中通过标题拖动列。我已经使用指令/sortablejs 取得了很大的进展，但我无法弄清楚以下内容：

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

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

我有一个此设置的代码笔：https://codepen.io/uglyhobbitfeet/pen/NWWKVza https://codepen.io/uglyhobbitfeet/pen/NWWKVza

Codepen 最重要的部分是：

<v-data-table v-sortable-table

and

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

我采用了稍微不同的路线，使用数据表上的键和自定义 onEnd 方法。工作代码在这里：

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

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