格式化 PrimeVue Table 中的 DateTime 属性

Question

我试图格式化数据表中行上的日期，但无济于事。我在数据表中使用模板主体来循环每一行以查找列是否为日期类型，但我不断地一遍又一遍地为每行设置相同的值

<template>
  <data-table :value="props.rows" stripedRows resizable-columns column-resize-mode="fit" tableStyle="min-width: 50rem"
    showGridlines scroll-height="1000px" :virtualScrollerOptions="{ itemSize: 15 }" removableSort
    sortField="row[columnKey]" :sort-order="-1">
    <column sortable v-for="(column, columnKey) in props.columns" :key="columnKey" :field="columnKey"
      :header="$t(column.name)">
      <template #body v-for="(row, rowKey) in props.rows">
        <div v-if="column.type === 'date'">
          {{ row[columnKey] !== undefined
            ? row[columnKey].toLocaleDateString() +
            " " +
            row[columnKey].toLocaleTimeString()
            : ""
          }}
        </div>
        <div v-else>
          {{ parseValue(row[columnKey]) }}
        </div>
      </template>

    </column>
    <column></column>
  </data-table>
</template>

我的道具是：

const props = defineProps({
  columns: Object,
  rows: Object,
  actions: Array,
  massUpdatable: Boolean,
  isLoading: Boolean,
  lastPageLoaded: Boolean,
  fullPage: Boolean,
});

我现在收到重复的行，我在这里错过了什么？

Answer 1

我按照那个示例并执行了以下操作：

<template>
  <data-table :value="filteredData" stripedRows resizable-columns column-resize-mode="fit" tableStyle="min-width: 50rem"
    showGridlines scroll-height="1000px" :virtualScrollerOptions="{ itemSize: 15 }" removableSort
    sortField="row[columnKey]" :sort-order="-1">
    <column sortable v-for="(column, columnKey) in tableColumns" :key="columnKey" :field="columnKey"
      :header="$t(column.name)">
      <template #body="{ data, field }">
        {{ column.type === 'date' ? `${data[field].toLocaleDateString()} ${data[field].toLocaleTimeString()}` : data[field] }}
      </template>

    </column>
    <column></column>
  </data-table>
</template>

模板中解构数据和字段的值与“

row[columnKey]

”完全相同，然后我可以针对该值运行“日期”条件，使用模板文字，它现在可以工作。但没有任何地方记录这是如何发生的。