Sortieren Sie die PrimeVue DataTable-Spalte nach Datum/Uhrzeit

Question

Ich habe eine PrimeVue DataTable (https://primefaces.org/primevue/datatable), die wie folgt angeordnet ist:

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

wobei die Tabelle mit den vom API-Aufruf empfangenen Daten gefüllt wird, mit dem unten aufgeführten Feldlayout:

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

Die von der API abgerufenen Daten liegen in Form der JS Date()-Komponente vor und werden wie folgt angezeigt: Sowohl das InitialDate als auch das FinishDate sind „01.08.2022 08:33:32“

Wie sortiere ich eine Spalte nach Datum und Zeitstempel in aufsteigender oder absteigender Reihenfolge, und im Moment geht es beim Sortieren der Spalte nur darum, die Werte basierend auf der ersten verfügbaren Zahl (die zufällig der Monat ist, den ich benötige) neu anzuordnen um nicht nur dem richtigen Monat zu entsprechen, sondern auch nach Zeit zu sortieren.

Jede Hilfe ist willkommen, danke.

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'}
];