vue.js - 拖动 Vuetify v-data-table 中的列

Question

我想在 v-data-table 中通过标题拖动列。我已经使用 directives/sortablejs 走了很远，但我无法弄清楚以下内容:

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

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

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

Codepen 最重要的部分是:

<v-data-table v-sortable-table

和

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

Answer 1

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

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

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