PrimeVue Table日期格式化异常：行数据重复问题排查

尝试在PrimeVue Data Table中格式化行内日期字段时，出现了每行数据重复显示的问题。

相关代码 #

模板代码 #

<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>

Props定义 #

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

问题原因 #

核心错误是在<column>的#body模板中手动遍历了props.rows。PrimeVue的Data Table组件内部已经会自动遍历每行数据并渲染对应列的内容，额外添加行遍历后，会导致每一列都渲染所有行的数据，最终出现行重复的现象。

另外Props定义里的rows类型错误，表格的数据源应该是数组而非对象，这也是潜在问题。

解决方案 #

1. 移除#body模板内的v-for="(row, rowKey) in props.rows"，改用PrimeVue提供的行上下文参数获取当前行数据
2. 修正Props中rows的类型为Array

修正后的代码 #

模板代码

<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="columnKey" :sort-order="-1">
    <column sortable v-for="(column, columnKey) in props.columns" :key="columnKey" :field="columnKey"
      :header="$t(column.name)">
      <!-- 通过slotProps获取当前行数据 -->
      <template #body="slotProps">
        <div v-if="column.type === 'date'">
          {{ slotProps.data[columnKey] !== undefined
            ? slotProps.data[columnKey].toLocaleDateString() + ' ' + slotProps.data[columnKey].toLocaleTimeString()
            : ''
          }}
        </div>
        <div v-else>
          {{ parseValue(slotProps.data[columnKey]) }}
        </div>
      </template>
    </column>
    <column></column>
  </data-table>
</template>

修正后的Props定义

const props = defineProps({
  columns: Object,
  rows: Array, // 修正为数组类型
  actions: Array,
  massUpdatable: Boolean,
  isLoading: Boolean,
  lastPageLoaded: Boolean,
  fullPage: Boolean,
});

内容的提问来源于stack exchange，提问作者Farid Guzman