Nuxt UI 表格组件新增行唯一标识支持

在最新版本的 Nuxt UI 框架中，UTable 组件获得了一项重要功能增强——支持为表格行设置唯一标识符。这项改进使得开发者能够更好地管理表格行的选择状态，特别是在分页场景下保持行选择的持久性。

功能背景

在数据表格应用中，经常需要处理行选择功能。当表格数据分页显示时，传统基于行索引的选择方式会遇到问题——切换页面后，行索引会重置，导致之前的选择状态丢失。为了解决这个问题，需要为每行数据指定一个唯一标识符，而不是依赖不稳定的行索引。

技术实现

Nuxt UI 的 UTable 组件底层使用了 TanStack Table 库。该库提供了 getRowId 方法，允许开发者自定义行标识的生成逻辑。最新版本的 Nuxt UI 通过扩展 CoreOptions 接口，将这一功能直接暴露给 UTable 组件。

开发者现在可以通过两种方式使用这一功能：

1. 直接传递 getRowId 函数：

<UTable :getRowId="(row) => row.id" />

2. 通过 idKey 简写形式（即将支持）：

<UTable idKey="id" />

使用场景

这项功能特别适用于以下场景：

1. 分页表格：在分页浏览数据时保持行选择状态
2. 数据更新：当表格数据动态更新时，维持已选择行的状态
3. 服务端分页：与服务端交互时准确标识选中的行

注意事项

1. 确保指定的行标识符在所有数据中确实是唯一的
2. 对于简单场景，使用 idKey 简写形式更便捷
3. 对于复杂场景，可以使用完整的 getRowId 函数实现更灵活的逻辑

这项改进使得 Nuxt UI 的表格组件在复杂数据管理场景下更加健壮和可靠，为开发者提供了更好的开发体验。