在 Vuetify v-data-table 中拖动列

Question

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

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

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

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

codepen 最重要的部分是：

<v-data-table v-sortable-table

和

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

【问题讨论】：

• th 在我拖动时确实会移动。我想它为您提供了拖动事件，让您有机会重新排列数组？
• 是的，th 会移动，但不会移动相应的 tds（也就是整列）

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" >

Answer 2

我将 ekjcfn3902039 实现的核心细节放在这里，这样您就不必整理好 Pen 中发生的所有其他内容。全部功劳归于他/她。

1. 将 SortableJS 添加到您的项目（通过 CDN 或通过 NMP 安装取决于您。）
2. 将 SortableJS 导入到您的 .Vue 文件中。
3. 将此功能添加到您的顶部<script>区域：

    function watchClass(targetNode, classToWatch) {
      let lastClassState = targetNode.classList.contains(classToWatch);
      const observer = new MutationObserver((mutationsList) => {
        for (let i = 0; i < mutationsList.length; i++) {
          const mutation = mutationsList[i];
          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
            const currentClassState = mutation.target.classList.contains(classToWatch);
            if (lastClassState !== currentClassState) {
              lastClassState = currentClassState;
              if (!currentClassState) {
                mutation.target.classList.add('sortHandle');
              }
            }
          }
        }
      });
      observer.observe(targetNode, { attributes: true });
    }

4. 将这些道具添加到您的 v-data-table def:

    v-sortable-table="{onEnd:sortTheHeadersAndUpdateTheKey}"
    :key="anIncreasingNumber"

5. 添加此数据变量：anIncreasingNumber: 1,
6. 添加以下方法并将this.tableHeaders更改为您的标头对象：

    sortTheHeadersAndUpdateTheKey(evt) {
      const headersTmp = this.tableHeaders;
      const oldIndex = evt.oldIndex;
      const newIndex = evt.newIndex;
      if (newIndex >= headersTmp.length) {
        let k = newIndex - headersTmp.length + 1;
        while (k--) {
          headersTmp.push(undefined);
        }
      }
      headersTmp.splice(newIndex, 0, headersTmp.splice(oldIndex, 1)[0]);
      this.table = headersTmp;
      this.anIncreasingNumber += 1;
    }

1. 添加此指令：

    directives: {
    'sortable-table': {
      inserted: (el, binding) => {
        el.querySelectorAll('th').forEach((draggableEl) => {
          // Need a class watcher because sorting v-data-table rows asc/desc removes the sortHandle class
          watchClass(draggableEl, 'sortHandle');
          draggableEl.classList.add('sortHandle');
        });
        Sortable.create(el.querySelector('tr'), binding.value ? { ...binding.value, handle: '.sortHandle' } : {});
      },
    },
  }

我已在这支 Pen 中将其归结为最低限度：https://codepen.io/bradlymathews/pen/QWyXpZv?editors=1010