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值没有新旧索引，因此该表在某些时候不可见，相反，它具有新旧位置

需要通过减少位置来重构现有功能值来获取索引，因此我们不需要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;
    },

此处工作的Codepen：https://codepen.io/chansv/pen/MWWvPOw?editors=1010

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

1 个答案: