PrimeVue - ReorderableColumns 上的 DataTable 重复键错误答案

【问题标题】：PrimeVue - DataTable duplicate key error on reorderableColumnsPrimeVue - ReorderableColumns 上的 DataTable 重复键错误
【发布时间】：2023-01-20 18:22:41
【问题描述】：

我有以下具有奇怪行为的数据表：

<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 />
    <Column header="Shipper" style="text-transform: capitalize">
        <template #body="slotProps">
            {{ slotProps.data.shipper.name.toLocaleLowerCase() }}
        </template>
    </Column>
</DataTable>

如果我尝试重新排序（拖动）列，我会收到以下错误。每次我尝试重新排序时，reference 列都会添加到表中。

[Vue 警告]：更新期间发现重复键：“参考”确保键是唯一的。

如果我删除 Shipper 列的这一部分：
<template #body="slotProps">
     {{ slotProps.data.shipper.name.toLocaleLowerCase() }}
</template>
并且只需使用 field="shipper.name" 引用托运人名称即可正常工作，没有任何错误。

我究竟做错了什么？

【问题讨论】：

标签： vue.js primevue

【解决方案1】：

通过阅读文档，我发现在使用 reorderColumns 功能时我错过了一个重要的部分。

如果特定列没有根据文档定义的字段，我需要设置一个 columnKey：

如果该列没有字段，请改用 columnKey，因为在启用重新排序时，列必须具有唯一键。

我添加了这个，现在可以使用了：
<Column header="Shipper" columnKey="shipper" style="text-transform: capitalize">
    <template #body="slotProps">
        {{ slotProps.data.shipper.name.toLocaleLowerCase() }}
    </template>
</Column>

【讨论】：