Question

我想将列标题拖到v-data-table中。我已经使用指令/ sortablejs了很多，但是我很难弄清楚以下内容：

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

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

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

codepen最重要的部分是：

<v-data-table v-sortable-table

和

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

Answer 1

我将ekjcfn3902039的实现的核心细节放在这里，因此您不必对伟大的Pen中发生的所有其他事情进行分类。功劳全归他/她。

将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更改为标题对象：

    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

Answer 2

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

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数据表中的列

2 个答案: