From 0dc9b6479f862d80de7effe629dfce46edaf1827 Mon Sep 17 00:00:00 2001 From: betavs <34408516+betavs@users.noreply.github.com> Date: Tue, 3 Sep 2024 21:05:21 +0800 Subject: [PATCH] fix(components): [table-v2] columns missing key field (#17891) * fix(components): [table-v2] columns missing key field * perf(components): [table-v2] columns missing key field * test(components): [table-v2] columns missing key field * perf(components): [table-v2] columns missing key field --- docs/en-US/component/table-v2.md | 2 ++ .../table-v2/src/components/header-row.tsx | 2 +- .../components/table-v2/src/components/row.tsx | 2 +- .../table-v2/src/composables/use-columns.ts | 17 +++++++++++------ .../table-v2/src/renderers/header-cell.tsx | 2 +- packages/components/table-v2/src/types.ts | 1 + 6 files changed, 17 insertions(+), 9 deletions(-) diff --git a/docs/en-US/component/table-v2.md b/docs/en-US/component/table-v2.md index a3b3d16d41..856a27480c 100644 --- a/docs/en-US/component/table-v2.md +++ b/docs/en-US/component/table-v2.md @@ -372,6 +372,8 @@ Note that these are `JavaScript` Objects, so you **CANNOT USE** kebab-case for t | ------------------ | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | align | Alignment of the table cell content | [Alignment](https://github.com/element-plus/element-plus/blob/b92b22932758f0ddea98810ae248f6ca62f77e25/packages/components/table-v2/src/constants.ts#L6) | left | | class | Class name for the column | String | — | +| key | Unique identification | [KeyType](#typings) | — | +| dataKey | Unique identification of data | [KeyType](#typings) | — | | fixed | Fixed direction of the column | Boolean/[FixedDir](https://github.com/element-plus/element-plus/blob/b92b22932758f0ddea98810ae248f6ca62f77e25/packages/components/table-v2/src/constants.ts#L11) | false | | flexGrow | CSSProperties flex grow, Only useful when this is not a fixed table | Number | 0 | | flexShrink | CSSProperties flex shrink, Only useful when this is not a fixed table | Number | 1 | diff --git a/packages/components/table-v2/src/components/header-row.tsx b/packages/components/table-v2/src/components/header-row.tsx index e3e30ddeff..b465797474 100644 --- a/packages/components/table-v2/src/components/header-row.tsx +++ b/packages/components/table-v2/src/components/header-row.tsx @@ -18,7 +18,7 @@ const TableV2HeaderRow = defineComponent({ column, columnIndex, headerIndex, - style: columnsStyles[column.key], + style: columnsStyles[column.key!], }) }) diff --git a/packages/components/table-v2/src/components/row.tsx b/packages/components/table-v2/src/components/row.tsx index 7e2e1949d4..3fb1738d9a 100644 --- a/packages/components/table-v2/src/components/row.tsx +++ b/packages/components/table-v2/src/components/row.tsx @@ -170,7 +170,7 @@ const TableV2Row = defineComponent({ columns, columnIndex, depth, - style: columnsStyles[column.key], + style: columnsStyles[column.key!], rowData, rowIndex, isScrolling: unref(isScrolling), diff --git a/packages/components/table-v2/src/composables/use-columns.ts b/packages/components/table-v2/src/composables/use-columns.ts index 664adf2ac9..0bfc37dca2 100644 --- a/packages/components/table-v2/src/composables/use-columns.ts +++ b/packages/components/table-v2/src/composables/use-columns.ts @@ -14,8 +14,15 @@ function useColumns( columns: Ref, fixed: Ref ) { + const _columns = computed(() => + unref(columns).map((column, index) => ({ + ...column, + key: column.key ?? column.dataKey ?? index, + })) + ) + const visibleColumns = computed(() => { - return unref(columns).filter((column) => !column.hidden) + return unref(_columns).filter((column) => !column.hidden) }) const fixedColumnsOnLeft = computed(() => @@ -61,9 +68,7 @@ function useColumns( }) const columnsStyles = computed(() => { - const _columns = unref(columns) - - return _columns.reduce['key'], CSSProperties>>( + return unref(_columns).reduce['key'], CSSProperties>>( (style, column) => { style[column.key] = calcColumnStyle(column, unref(fixed), props.fixed) return style @@ -80,7 +85,7 @@ function useColumns( }) const getColumn = (key: KeyType) => { - return unref(columns).find((column) => column.key === key) + return unref(_columns).find((column) => column.key === key) } const getColumnStyle = (key: KeyType) => { @@ -108,7 +113,7 @@ function useColumns( } return { - columns, + columns: _columns, columnsStyles, columnsTotalWidth, fixedColumnsOnLeft, diff --git a/packages/components/table-v2/src/renderers/header-cell.tsx b/packages/components/table-v2/src/renderers/header-cell.tsx index 85f8e858f5..1413da23ed 100644 --- a/packages/components/table-v2/src/renderers/header-cell.tsx +++ b/packages/components/table-v2/src/renderers/header-cell.tsx @@ -58,7 +58,7 @@ const HeaderCellRenderer: FunctionalComponent = ( let sorting: boolean, sortOrder: SortOrder if (sortState) { - const order = sortState[column.key] + const order = sortState[column.key!] sorting = Boolean(oppositeOrderMap[order]) sortOrder = sorting ? order : SortOrder.ASC } else { diff --git a/packages/components/table-v2/src/types.ts b/packages/components/table-v2/src/types.ts index 25f4a7ed8f..5a64bc418d 100644 --- a/packages/components/table-v2/src/types.ts +++ b/packages/components/table-v2/src/types.ts @@ -66,6 +66,7 @@ export type Column = { */ align?: Alignment class?: string | ClassNameGetter + key?: KeyType dataKey?: KeyType fixed?: true | FixedDirection flexGrow?: CSSProperties['flexGrow']