Isih lajur PrimeVue DataTable mengikut tarikh/masa

Question

Saya mempunyai Jadual Data PrimeVue (https://primefaces.org/primevue/datatable) yang disusun seperti berikut:

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

di mana jadual diisi dengan data yang diterima daripada panggilan API, dengan reka letak medan disenaraikan di bawah:

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

Data yang diambil daripada API adalah dalam bentuk komponen JS Date() dan dipaparkan seperti berikut: kedua-dua initialDate dan finishDate ialah "08/01/2022 08:33:32"

Bagaimana saya boleh mengisih lajur mengikut tarikh dan cap masa dalam tertib menaik atau menurun, dan sekarang, mengisih lajur hanyalah mengenai menyusun semula nilai berdasarkan nombor pertama yang tersedia (yang kebetulan saya memerlukannya); bukan sahaja sesuai dengan bulan yang betul, tetapi Susun mengikut masa.

Sebarang bantuan adalah dihargai, terima kasih.

Answer 1

Kandungan yang anda terima daripada API tidak boleh Date() 对象，但可能是 string. Jadi jika anda mengisih mengikut lajur ini, baris akan diisih secara leksikografi, bukan mengikut kronologi.

Untuk mengelakkan ini, anda harus menukar data daripada API kepada Date objek. Isih mengikut kronologi adalah sangat mudah jika anda menukarnya kepada cap masa:

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

Anda kemudian boleh menentukannya sebagai medan untuk mengisih lajur mengikut:

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