如何使用重新排列的列创建 vuetify 数据表？答案

【问题标题】：How to create vuetify datatable with rearranging columns?如何使用重新排列的列创建 vuetify 数据表？
【发布时间】：2020-02-24 12:04:44
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

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

需要通过递减位置来重构现有功能 values 来获取索引，所以我们不需要 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

【讨论】：