按日期/時間對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'}
];