PrimeVue DataTable启用可重排列时出现重复键错误

问题描述 #

使用PrimeVue DataTable时，当列使用自定义body插槽但未设置field属性，拖拽重排列会触发如下警告，且reference列被重复添加到表格中：

[Vue warn]: Duplicate keys found during update: "reference" Make sure keys are unique.

移除自定义body插槽、改用field="shipper.name"直接绑定字段后，功能恢复正常。

问题原因 #

PrimeVue DataTable依赖列的field属性作为列的唯一标识（key）。当某列未设置field时，组件内部无法生成唯一的列key，会错误复用其他列的key（比如你的frozen列的reference字段），导致DOM更新时出现重复key冲突，进而引发重复列的异常行为。

解决方案 #

给使用自定义body插槽的Column组件添加唯一的field属性，即使该字段不是直接绑定的数据字段，只要保证在所有列中唯一即可：

<DataTable
    :scrollable="true"
    :value="shipments"
    :totalRecords="shipments.length"
    :reorderableColumns="true"
    :alwaysShowPaginator="false"
    :paginator="true"
    :rows="10"
    :resizableColumns="true"
    columnResizeMode="fit"
    sortMode="multiple"
    :stripedRows="true"
    removableSort
    dataKey="reference"
    responsiveLayout="scroll">
    <template #empty> No records found </template>
    <Column field="reference" header="Shipment Number" :sortable="true" frozen />
    <!-- 添加唯一的field属性 -->
    <Column field="shipper" header="Shipper" style="text-transform: capitalize">
        <template #body="slotProps">
            {{ slotProps.data.shipper.name.toLocaleLowerCase() }}
        </template>
    </Column>
</DataTable>

说明 #

添加唯一的field后，组件能正确区分每一列，重排时不会再出现重复key的冲突，自定义body插槽的功能也能正常保留。你也可以设置field="shipper.name"，和之前直接绑定的字段一致，效果相同。

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