我想将列标题拖到v-data-table中。我已经使用指令/ sortablejs了很多,但是我很难弄清楚以下内容:
任何帮助/见解将不胜感激!
我在以下位置有此设置的代码笔: https://codepen.io/uglyhobbitfeet/pen/NWWKVza
codepen最重要的部分是:
<v-data-table v-sortable-table
和
directives: {
'sortable-table': {
...
}
}
答案 0 :(得分:2)
我将ekjcfn3902039的实现的核心细节放在这里,因此您不必对伟大的Pen中发生的所有其他事情进行分类。功劳全归他/她。
<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-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
答案 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" >