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

Question

我正在使用 vuetify 的 data tables component 来显示此模式的对象：

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

但是在我安装的挂钩中，我覆盖了日期字段以按照产品所有者的要求对其进行格式化：

...
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

我现在通过设置要排序的 table header 的排序属性解决了这个问题。找到它相当棘手，所以如果其他人遇到这个问题，请查看 v-data-table API.

的 table header 示例

我用它来为此 table header 指定一个单独的排序函数，如下所示：

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

也将使用普通 JavaScript 日期，但我们也将 moment 用于项目的其余部分。

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

How to use Vuetify's data tables with custom date sort without breaking the grouping

javascript

sorting

html-table

vuejs2

vuetify.js