Vuetify -如何防止触发表排序函数

2fjabf4q  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(135)

我有一个vuetify v-data-table,我想在发生其他操作时阻止它排序(isLoading为true)。
我尝试实现的操作是调整网格的大小,该网格有一个grabhandle,它是表标题的子元素,当单击并拖动它来调整大小时,仍然会触发表标题上的sort事件。正在寻找一个解决方案,要么排除子元素触发排序,要么通过update:sort-by事件处理它,并在设置标志时阻止它。
第一个
codepen here
我试过添加像.stop.prevent这样的偶数修饰符,但似乎没有将$event对象传递给我指定的方法。我也试过显式传递$event对象,例如@update:sort-by="preventSorting($event)"我试过将disable-sort数据表属性设置为isLoading,但sort事件仍然发生

7cjasjjr

7cjasjjr1#

这可以通过自定义排序属性来实现。您必须手动处理每种列类型的排序,但您可以完全控制是否根据组件或应用中的其他状态进行排序。
请参阅此更新的codepen(排序时,它只会正确处理数字类型列,但也不意味着它是一个完整的示例)

customSort(items, index, isDesc) {
  if (this.isLoading) {
    return items;
  }
  items.sort((a, b) => {
    if (isDesc != 'false') {
      return a[index] < b[index] ? -1 : 1;
    } else {
      return b[index] < a[index] ? -1 : 1;
    }
  });
  return items;
}

相关问题