diff --git a/config-ui/src/components/table/hooks/use-row-selection.ts b/config-ui/src/components/table/hooks/use-row-selection.ts index ab56bdd81be..41fcd0fb173 100644 --- a/config-ui/src/components/table/hooks/use-row-selection.ts +++ b/config-ui/src/components/table/hooks/use-row-selection.ts @@ -21,7 +21,8 @@ import { useState, useEffect, useMemo } from 'react'; export interface UseRowSelectionProps { dataSource: T[]; rowSelection?: { - rowKey: ID; + rowKey?: ID; + getRowKey?: (data: T) => ID; type?: 'checkbox' | 'radio'; selectedRowKeys?: ID[]; onChange?: (selectedRowKeys: ID[]) => void; @@ -33,6 +34,7 @@ export const useRowSelection = ({ dataSource, rowSelection }: UseRowSelection const { rowKey = 'key', + getRowKey = (data: T) => (data as any)[rowKey], type = 'checkbox', selectedRowKeys, onChange, @@ -47,7 +49,7 @@ export const useRowSelection = ({ dataSource, rowSelection }: UseRowSelection }, [selectedRowKeys]); const handleChecked = (data: T) => { - const key = (data as any)[rowKey]; + const key = getRowKey(data); let result: ID[] = selectedKeys; switch (true) { @@ -69,7 +71,7 @@ export const useRowSelection = ({ dataSource, rowSelection }: UseRowSelection let result: string[] = []; if (selectedKeys.length !== dataSource.length) { - result = dataSource.map((data: any) => data[rowKey]); + result = dataSource.map(getRowKey); } onChange ? onChange(result) : setSelectedKeys(result); @@ -82,7 +84,7 @@ export const useRowSelection = ({ dataSource, rowSelection }: UseRowSelection getCheckedAll: () => dataSource.length === selectedKeys.length, onCheckedAll: handleCheckedAll, getChecked: (data: T) => { - return selectedKeys.includes((data as any)[rowKey]); + return selectedKeys.includes(getRowKey(data)); }, onChecked: handleChecked, }), diff --git a/config-ui/src/plugins/components/data-scope-select/index.tsx b/config-ui/src/plugins/components/data-scope-select/index.tsx index fc26b5249f5..4a3b57daa72 100644 --- a/config-ui/src/plugins/components/data-scope-select/index.tsx +++ b/config-ui/src/plugins/components/data-scope-select/index.tsx @@ -122,7 +122,7 @@ export const DataScopeSelect = ({ ]} dataSource={data} rowSelection={{ - rowKey: getPluginId(plugin), + getRowKey: (data) => getPluginScopeId(plugin, data), type: 'checkbox', selectedRowKeys: scopeIds as string[], onChange: (selectedRowKeys) => setScopeIds(selectedRowKeys),