如何在不破坏分组的情况下使用具有自定义日期排序的Vuetify数据表

Question

我使用vuetify的数据表组件来显示此模式的对象：

{ date: '2021-12-23T11:12:18.669Z', type: 0, name: 'Meter-234452', temperature: '46', param_value: '23', floor_temp: '23' },

但是在我的挂载钩子中，我正在覆盖date字段，以便按照产品所有者的要求对其进行格式化：

...
moment(date).format('DD.MM.YYYY HH.mm')

我还将数据按“名称”字段分组，该字段工作非常好。但是按日期对数据进行排序根本不起作用，它只会按有意义的日期对数据进行排序。

我试图按照以下方式在组件的custom-sort支柱中指定一个自定义函数：

customSort (items, sortBy, sortDesc, locale) {
      const activeSortColumn = sortBy[0]
      const activeSortDesc = sortDesc[0]
      items.sort((a, b) => {
        if (activeSortColumn === 'date') {
          const dateA = moment(a.date, 'DD.MM.YYYY HH.mm').toDate()
          const dateB = moment(b.date, 'DD.MM.YYYY HH.mm').toDate()
          return activeSortDesc ? dateA - dateB : dateB - dateA
        }
        return activeSortDesc ? ('' + a[activeSortColumn]).localeCompare(b[activeSortColumn]) : ('' + b[activeSortColumn]).localeCompare(a[activeSortColumn])
      })
      return items
    },

如果我不使用分组，这是非常好的，但是如果我要分组并指定这个自定义排序函数，它将如下所示：

​

​

排序仍然是正确的，但它也改变了分组，这也有点道理。我认为它是被排序然后分组的，这使得它创建了重复的组。

我不知道如何解决这个问题，因为我想保持分组，但也必须为日期格式和所有其他列同时提供正确的排序。我注意到，如果使用分组字段，sortBy参数也将是一个包含分组字段的数组，所以我想也许对数据数组进行两次排序可能会有帮助。

我很感激你的帮助！

Answer 1

我现在通过设置要排序的表头的排序属性来解决这个问题。要找到它是相当棘手的，所以如果其他人遇到这个问题，请查看数据表API的表头示例。

我使用它为这个表头指定了一个单独的排序函数，如下所示：

customSort (a, b) {
  return moment(a, this.tableDateFormat).toDate() - moment(b, this.tableDateFormat).toDate()
},

也可以使用普通的JavaScript日期，但我们也在为项目的其余部分使用时间。