PrimeNG 12.2.3版本p-table启用状态保存后列重排功能失效问题咨询

你遇到的这个问题我之前在PrimeNG 12.x版本的项目里也碰到过，当同时开启列重排和状态保存功能时，很容易因为列配置的字段缺失导致报错，进而让列重排失效。

问题原因分析 #

从你给出的报错信息Cannot read properties of undefined (reading 'field')来看，核心问题出在PrimeNG表格的saveColumnOrder方法里——当启用状态保存后，表格在保存列顺序时会遍历你的columns配置数组，尝试读取每一列的field属性来生成状态数据，但你的列对象里可能没有定义这个field字段，或者字段值为undefined，所以触发了这个错误，导致列重排后的状态保存失败，看起来就像列没发生变化。

解决方案 #

你只需要调整你的列配置，确保每一个列对象都包含field字段即可，具体操作如下：

• 检查并修改你的columns数组，给每个列对象添加field属性，并且保证它的值和你绑定的pSortableColumn的column.id一致（或者对应数据源里的字段名）。示例代码如下：

// 示例列配置
columns = [
  { id: 'id', field: 'id', sortable: true, size: 'col-2' },
  { id: 'title', field: 'title', sortable: true, size: 'col-5' },
  // 其他列按此格式补充
];

• 如果你的column.id本身就对应数据源的字段名，直接给列对象设置field: column.id就能快速解决问题。
• 另外，建议你清空浏览器localStorage里的notifications键值（因为之前可能已经保存了错误的状态数据），然后重新测试列重排功能。

验证方法 #

修改完成后，尝试拖动列并放下，此时控制台应该不会再出现报错，同时你可以打开浏览器的开发者工具查看localStorage，确认notifications对应的状态数据里已经正确保存了列的最新顺序，表格刷新后也能保持调整后的列布局。

备注：内容来源于stack exchange，提问作者herve