问题描述
什么是可排序的?为什么我遇到了问题
sortTheHeadersAndUpdateTheKey(evt) {
const headersTmp = this.headers;
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,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' } : {});
},<v-data-table
:headers="showHeaders"
:page="page"
:pageCount="numberOfPages"
:options.sync="options"
:loading="loading"
:server-items-length="totalItems"
:items="items"
:items-per-page="15"
class="mainTable"
@dblclick:row="editItem"
v-sortable-table="{onEnd:sortTheHeadersAndUpdateTheKey}"
:key="anIncreasingNumber"
:footer-props="{
showFirstLastPage: true,firstIcon: 'mdi-arrow-collapse-left',lastIcon: 'mdi-arrow-collapse-right',prevIcon: 'mdi-minus',nextIcon: 'mdi-plus'
}"
>
我只是尝试这样做Dragging columns in a Vuetify v-data-table 但是有一个错误,我做了他所说的一切,但仍然遇到问题我已经安装并导入了 vuedraggable
可能导入错误--->导入'vuedraggable'
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)