javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [table-v2] columns missing key field (#17891)

Browse Source 
* 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
This commit is contained in:
betavs
2024-09-03 21:05:21 +08:00
committed by GitHub
parent 50e02f3ab9
commit 0dc9b6479f
6 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/en-US/component/table-v2.md
View File

@@ -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 |

2
packages/components/table-v2/src/components/header-row.tsx
View File

@@ -18,7 +18,7 @@ const TableV2HeaderRow = defineComponent({
column,
columnIndex,
headerIndex,
style: columnsStyles[column.key],
style: columnsStyles[column.key!],
})
})

2
packages/components/table-v2/src/components/row.tsx
View File

@@ -170,7 +170,7 @@ const TableV2Row = defineComponent({
columns,
columnIndex,
depth,
style: columnsStyles[column.key],
style: columnsStyles[column.key!],
rowData,
rowIndex,
isScrolling: unref(isScrolling),

17
packages/components/table-v2/src/composables/use-columns.ts
View File

@@ -14,8 +14,15 @@ function useColumns(
columns: Ref<AnyColumns>,
fixed: Ref<boolean>
) {
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<Record<Column<any>['key'], CSSProperties>>(
return unref(_columns).reduce<Record<Column<any>['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,

2
packages/components/table-v2/src/renderers/header-cell.tsx
View File

@@ -58,7 +58,7 @@ const HeaderCellRenderer: FunctionalComponent<HeaderCellRendererProps> = (
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 {

1
packages/components/table-v2/src/types.ts
View File

@@ -66,6 +66,7 @@ export type Column<T = any> = {
*/
align?: Alignment
class?: string | ClassNameGetter<T>
key?: KeyType
dataKey?: KeyType
fixed?: true | FixedDirection
flexGrow?: CSSProperties['flexGrow']