javascript - 如何通过重新排列列来创建 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;
}

我创建了带有选择框的 New Codepen。那么我该如何解决这个问题呢？

Answer 1

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

Need to refactor the existing function by decrementing the position values to get the index, so we don't need while loop to add a new index

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