在 Vuetify v-data-table 中拖动列

Question

我想在 v 数据表中拖动列的标题。我已经使用指令/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" >

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

   更改为您的 headers 对象：

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

7. 添加此指令：

    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 3

但是当我们使用国际化（希伯来语（RTL 模式））时，这不起作用。