javascript - 如何使用重新排列列创建vuetify数据表？

我正在使用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。那我该如何解决这个问题呢？

最佳答案

按照上面的代码，由于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

关于javascript - 如何使用重新排列列创建vuetify数据表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58604211/