From 353d5fa1453848971263b16ce363205b14c6d8be Mon Sep 17 00:00:00 2001
From: Cat1007 <54425790+Cat1007@users.noreply.github.com>
Date: Fri, 3 Nov 2023 11:01:21 +0800
Subject: [PATCH] =?UTF-8?q?fix(table):=20=E4=BF=AE=E6=AD=A3=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E5=88=97=E5=8F=98=E5=8C=96=E6=97=B6,=E8=A1=A8?=
 =?UTF-8?q?=E5=A4=B4=E7=9A=84=E5=AE=BD=E5=BA=A6=E5=92=8C=E9=AB=98=E5=BA=A6?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=97=AE=E9=A2=98=20(#3557)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 🐛 修正计算总列宽时,重复叠加计算子表头宽度的问题

* fix(table): 在提供列配置选项时,默认只提供叶子列作为配置选项,作为最细粒度配置的方式

* fix(table): 修正动态列变化时,表头的宽度和高度更新问题

* fix(table): 修正错误的 ref 用法
---
 src/table/base-table.tsx    | 23 +++++++++++++++--------
 src/table/hooks/useFixed.ts |  5 ++++-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/table/base-table.tsx b/src/table/base-table.tsx
index 1447a8f3b6..fa8eb3257b 100644
--- a/src/table/base-table.tsx
+++ b/src/table/base-table.tsx
@@ -477,15 +477,22 @@ export default defineComponent({
     // IE 浏览器需要遮挡 header 吸顶滚动条，要减去 getBoundingClientRect.height 的滚动条高度 4 像素
     const IEHeaderWrap = getIEVersion() <= 11 ? 4 : 0;
     const barWidth = this.isWidthOverflow ? this.scrollbarWidth : 0;
-    const affixHeaderHeight = (this.affixHeaderRef?.getBoundingClientRect().height || 0) - IEHeaderWrap;
-    const affixHeaderWrapHeight = affixHeaderHeight - barWidth;
+    const affixHeaderHeight = ref((this.affixHeaderRef?.getBoundingClientRect().height || 0) - IEHeaderWrap);
+    // 等待表头渲染完成后再更新高度，有可能列变动带来多级表头的高度变化，错误高度会导致滚动条显示
+    const timer = setTimeout(() => {
+      affixHeaderHeight.value = (this.affixHeaderRef?.getBoundingClientRect().height || 0) - IEHeaderWrap;
+      clearTimeout(timer);
+    }, 0);
+    const affixHeaderWrapHeight = computed(() => affixHeaderHeight.value - barWidth);
     // 两类场景：1. 虚拟滚动，永久显示表头，直到表头消失在可视区域； 2. 表头吸顶，根据滚动情况判断是否显示吸顶表头
     const headerOpacity = props.headerAffixedTop ? Number(this.showAffixHeader) : 1;
-    const affixHeaderWrapHeightStyle = {
-      width: `${this.tableWidth}px`,
-      height: `${affixHeaderWrapHeight}px`,
-      opacity: headerOpacity,
-    };
+    const affixHeaderWrapHeightStyle = computed(() => {
+      return {
+        width: `${this.tableWidth}px`,
+        height: `${affixHeaderWrapHeight.value}px`,
+        opacity: headerOpacity,
+      };
+    });
     // 多级表头左边线缺失
     const affixedLeftBorder = this.bordered ? 1 : 0;
     const affixedHeader = Boolean(
@@ -514,7 +521,7 @@ export default defineComponent({
     // 添加这一层，是为了隐藏表头的横向滚动条。如果以后不需要照顾 IE 10 以下的项目，则可直接移除这一层
     // 彼时，可更为使用 CSS 样式中的 .hideScrollbar()
     const affixHeaderWithWrap = (
-      <div class={this.tableBaseClass.affixedHeaderWrap} style={affixHeaderWrapHeightStyle}>
+      <div class={this.tableBaseClass.affixedHeaderWrap} style={affixHeaderWrapHeightStyle.value}>
         {affixedHeader}
       </div>
     );
diff --git a/src/table/hooks/useFixed.ts b/src/table/hooks/useFixed.ts
index 60d7df0571..618af98b99 100644
--- a/src/table/hooks/useFixed.ts
+++ b/src/table/hooks/useFixed.ts
@@ -506,7 +506,10 @@ export default function useFixed(
       });
       const rootThWidthList = pick(thWidthList, preColKeys);
       const oldTotalWidth = Object.values(rootThWidthList).reduce((r = 0, n) => r + n);
-      setTableElmWidth(oldTotalWidth - reduceWidth);
+      // 保留原有可能编辑过的列宽度，但是当剩余列过小时，表头小于内容宽，需要缩放回内容宽度
+      const contentWidth = tableElmRef.value.getBoundingClientRect().width;
+      const widthToReserve = oldTotalWidth - reduceWidth;
+      setTableElmWidth(Math.max(contentWidth, widthToReserve));
     }
   });