按日期/时间对PrimeVue DataTable列进行排序

Question

我有一个 PrimeVue DataTable (https://primefaces.org/primevue/datatable)，其排列如下：

<DataTable
  :rows = "5"
  :value = "apiItems"
>
  <Column
    v-for="data in columns"
    :field="data.field"
    :header="data.header"
    :key="data.field"
    :sortable="true"
    />
</DataTable>

其中表格由从 API 调用接收到的数据填充，字段布局如下所列：

const columns = [
  { field: 'initialDate', header: 'Initial Date'},
  { field: 'finishDate', header: 'Finish Date'}
];

从 API 检索的数据采用 JS Date() 组件的形式，显示如下：initialDate 和 finishDate 均为“08/01/2022 08:33:32”

如何通过日期和时间戳升序或降序对列进行排序，而现在，对列进行排序只是根据可用的第一个数字（恰好是月份）重新排列值；我需要它们不仅对应于正确的月份，还对应于时间进行排序。

感谢任何帮助，谢谢。

Answer 1

您从 API 接收到的内容不能是 Date() 对象，但可能是 string。因此，如果您按此列排序，则行将按字典顺序排序，而不是按时间顺序排序。

为避免这种情况，您应该将来自 API 的数据转换为 Date 对象。如果将其转换为时间戳，则按时间顺序排序非常方便：

for (item of apiItems) {
  item.initialDateObj = new Date(item.initialDate)
  item.initialDateTimestamp = item.intialDateTimeObj.getTime()
}

然后您可以将其指定为对列进行排序的字段：

const columns = [
  { field: 'initialDate', sortField: 'initialDateTimestamp', header: 'Initial Date'},
  { field: 'finishDate', sortField: 'finishDateTimestamp', header: 'Finish Date'}
];