string | number)
}
const props = withDefaults(defineProps(), {
@@ -222,6 +223,18 @@ const props = withDefaults(defineProps(), {
const sortKey = ref('')
const sortOrder = ref<'asc' | 'desc'>('asc')
const actionsExpanded = ref(false)
+const resolveRowKey = (row: any, index: number) => {
+ if (typeof props.rowKey === 'function') {
+ const key = props.rowKey(row)
+ return key ?? index
+ }
+ if (typeof props.rowKey === 'string' && props.rowKey) {
+ const key = row?.[props.rowKey]
+ return key ?? index
+ }
+ const key = row?.id
+ return key ?? index
+}
// 数据/列变化时重新检查滚动状态
// 注意:不能监听 actionsExpanded,因为 checkActionsColumnWidth 会临时修改它,会导致无限循环
diff --git a/frontend/src/components/common/README.md b/frontend/src/components/common/README.md
index 640cdc0e..1733cfad 100644
--- a/frontend/src/components/common/README.md
+++ b/frontend/src/components/common/README.md
@@ -13,6 +13,7 @@ A generic data table component with sorting, loading states, and custom cell ren
- `columns: Column[]` - Array of column definitions with key, label, sortable, and formatter
- `data: any[]` - Array of data objects to display
- `loading?: boolean` - Show loading skeleton
+- `rowKey?: string | (row: any) => string | number` - Row key field or resolver (defaults to `row.id`, falls back to index)
**Slots:**
diff --git a/frontend/src/components/keys/UseKeyModal.vue b/frontend/src/components/keys/UseKeyModal.vue
index 546a53ab..58f42ae6 100644
--- a/frontend/src/components/keys/UseKeyModal.vue
+++ b/frontend/src/components/keys/UseKeyModal.vue
@@ -28,8 +28,8 @@
{{ platformDescription }}
-
-
+
+
|