From 4c482d59c0352b933d3309bb61db927c4109985d Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Wed, 7 Sep 2022 15:42:56 +0800 Subject: [PATCH 1/3] =?UTF-8?q?perf(table):=20=E4=BF=AE=E6=94=B9=E5=86=85?= =?UTF-8?q?=E5=B5=8C=E5=86=85=E5=AE=B9=E5=9B=BA=E5=AE=9A=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/table/src/TableEmbedRow.tsx | 8 +++++++- packages/ui/table/src/styles/table.scss | 12 ++++++++++-- .../table/stories/async-expanded-render.stories.tsx | 4 ++-- 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/ui/table/src/TableEmbedRow.tsx b/packages/ui/table/src/TableEmbedRow.tsx index f9028effa..a819be25d 100644 --- a/packages/ui/table/src/TableEmbedRow.tsx +++ b/packages/ui/table/src/TableEmbedRow.tsx @@ -21,6 +21,7 @@ export const TableEmbedRow = ({ getEmbedPanelById, isEmbedLoadingId, onEmbedSwitch, + scrollBodyElementRef, } = useTableContext() const loading = isEmbedLoadingId(rowData.id) @@ -38,7 +39,12 @@ export const TableEmbedRow = ({ {/* 乐观渲染：内嵌面板内容 */} - {getEmbedPanelById(rowData.id)} +
+ {getEmbedPanelById(rowData.id)} +
diff --git a/packages/ui/table/src/styles/table.scss b/packages/ui/table/src/styles/table.scss index f07e144ce..514f23ab6 100644 --- a/packages/ui/table/src/styles/table.scss +++ b/packages/ui/table/src/styles/table.scss @@ -420,9 +420,17 @@ $prefix: '#{$component-prefix}-table' !default; position: relative; z-index: 0; - & > td { - background-color: use-color('gray', 200); + &__wrapper { + box-sizing: border-box; + position: sticky; + left: 0; padding: use-spacing(10); + overflow: hidden; + background-color: use-color('gray', 200); + } + + & > td { + padding: 0; } } diff --git a/packages/ui/table/stories/async-expanded-render.stories.tsx b/packages/ui/table/stories/async-expanded-render.stories.tsx index f715b922f..498f80e9c 100644 --- a/packages/ui/table/stories/async-expanded-render.stories.tsx +++ b/packages/ui/table/stories/async-expanded-render.stories.tsx @@ -9,12 +9,12 @@ export const AsyncExpandedRender = () => { { title: '商品名', dataKey: 'name', - width: 120, + width: 150, }, { title: '品类', dataKey: 'type', - width: 80, + width: 150, }, { title: '规格', From e3c0d06a568e03989b7f8e7aed1ccd515911954e Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Wed, 7 Sep 2022 19:40:05 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix(table):=20=E4=BF=AE=E5=A4=8D=E5=86=BB?= =?UTF-8?q?=E7=BB=93=E5=88=97=E5=8A=A8=E6=80=81=E8=B0=83=E6=95=B4=E5=AE=BD?= =?UTF-8?q?=E5=BA=A6=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/table/src/styles/table.scss | 3 ++- packages/ui/table/src/use-table.ts | 10 ++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/ui/table/src/styles/table.scss b/packages/ui/table/src/styles/table.scss index 514f23ab6..f5c8d9e52 100644 --- a/packages/ui/table/src/styles/table.scss +++ b/packages/ui/table/src/styles/table.scss @@ -138,10 +138,11 @@ $prefix: '#{$component-prefix}-table' !default; height: 100%; bottom: 0; right: 0; + border-left: 2px solid use-color('gray', 50); cursor: col-resize; z-index: 1; - &:hover { + .#{$prefix}-header__resizable:hover & { background-color: use-color-mode('primary'); } } diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts index b01415002..ff760352c 100644 --- a/packages/ui/table/src/use-table.ts +++ b/packages/ui/table/src/use-table.ts @@ -250,6 +250,16 @@ export const useTable = ({ nextColumns, scrollWidth ? scrollWidth / lastColumns.length : 100 ) + + if (colWidths) { + // colWidths 记录的是最新的列宽，当它有值时，重置一下列宽，否则会导致冻结列动态调整宽度后定位不准 + nextColumns = nextColumns.map((item, index) => { + return { + ...item, + width: colWidths[index], + } + }) + } } let leftColumns = [] as any[] From 00f0eb8c0ec6ade6b7eb717dd9e763c6143b8370 Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Thu, 8 Sep 2022 19:33:25 +0800 Subject: [PATCH 3/3] =?UTF-8?q?chore(table):=20=E5=9B=9E=E9=80=80=E5=86=85?= =?UTF-8?q?=E5=B5=8C=E5=86=85=E5=AE=B9=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/table/src/TableEmbedRow.tsx | 7 +------ packages/ui/table/src/styles/table.scss | 12 ++---------- 2 files changed, 3 insertions(+), 16 deletions(-) diff --git a/packages/ui/table/src/TableEmbedRow.tsx b/packages/ui/table/src/TableEmbedRow.tsx index a819be25d..3e0601644 100644 --- a/packages/ui/table/src/TableEmbedRow.tsx +++ b/packages/ui/table/src/TableEmbedRow.tsx @@ -39,12 +39,7 @@ export const TableEmbedRow = ({ {/* 乐观渲染：内嵌面板内容 */} -
- {getEmbedPanelById(rowData.id)} -
+ {getEmbedPanelById(rowData.id)} diff --git a/packages/ui/table/src/styles/table.scss b/packages/ui/table/src/styles/table.scss index f5c8d9e52..6acaa5352 100644 --- a/packages/ui/table/src/styles/table.scss +++ b/packages/ui/table/src/styles/table.scss @@ -421,17 +421,9 @@ $prefix: '#{$component-prefix}-table' !default; position: relative; z-index: 0; - &__wrapper { - box-sizing: border-box; - position: sticky; - left: 0; - padding: use-spacing(10); - overflow: hidden; - background-color: use-color('gray', 200); - } - & > td { - padding: 0; + background-color: use-color('gray', 200); + padding: use-spacing(10); } }