如何创建重新排列列的vuetify数据表

Question

我正在处理VueJs模板，需要创建一个具有重新排列列的数据表。我得到了重新排列列的Codepen，但当我用它添加选择框时，它会产生问题，并且当再次重新排列列时，表在某个时刻是不可见的。我添加了这个方法来对标题进行排序，我认为它会产生冲突

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, 0, headersTmp.splice(oldIndex, 1)[0]);
this.table = headersTmp;
this.anIncreasingNumber += 1;
}

我用选择框创建了新代码笔。那么我该如何解决这个问题呢？

Answer 1

根据上面的代码，由于evt值没有新旧索引，该表在某些时候是不可见的，相反，它有新旧位置

需要通过递减位置来重构现有函数值来获取索引，因此我们不需要while循环来添加新的索引

sortTheHeadersAndUpdateTheKey(evt) {
const headersTmp = this.headers;
const oldIndex = evt.oldIndex - 1;
const newIndex = evt.newIndex - 1;
headersTmp.splice(newIndex, 0, headersTmp.splice(oldIndex, 1)[0]);
this.table = headersTmp;
this.anIncreasingNumber += 1;
},

在此处打开工作代码：https://codepen.io/chansv/pen/MWWvPOw?editors=1010