在 Vuetify 中拖动列 v-data-table

Question

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

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

任何 help/insight 将不胜感激！

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

代码笔最重要的部分是：

<v-data-table v-sortable-table

和

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

Answer 1

我通过在 data-table 上使用键和自定义 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 中发生的所有其他事情进行分类。全部归功于 him/her.

将 SortableJS 添加到您的项目中（通过 CDN 或通过 NMP 安装由您决定。）
将 SortableJS 导入您的 .Vue 文件。
把这个功能加到你的上面<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 });
    }

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

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

添加此数据变量：anIncreasingNumber: 1,
添加以下方法并将 this.tableHeaders 更改为您的 headers object:

    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;
    }

添加此指令：

    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' } : {});
      },
    },
  }

我在这支笔中将其浓缩到最低限度：https://codepen.io/bradlymathews/pen/QWyXpZv?editors=1010

在 Vuetify 中拖动列 v-data-table

Dragging columns in a Vuetify v-data-table

vue.js

vuetify.js