拖动Vuetify v数据表中的列

时间:2019-10-04 14:57:22

标签: vue.js vuetify.js

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

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

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

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

codepen最重要的部分是:

<v-data-table v-sortable-table

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

2 个答案:

答案 0 :(得分: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 });
    }
  1. 将这些道具添加到您的v-data-table def中:
    v-sortable-table="{onEnd:sortTheHeadersAndUpdateTheKey}"
    :key="anIncreasingNumber"
  1. 添加此数据变量:anIncreasingNumber: 1,
  2. 添加以下方法,并将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' } : {});
      },
    },
  }

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

答案 1 :(得分: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" >