From 96268e1ac3ffde7354088a289dde254a4c4b3261 Mon Sep 17 00:00:00 2001
From: chaishi <yaoyanhuoyi@qq.com>
Date: Tue, 16 Aug 2022 22:52:04 +0800
Subject: [PATCH 1/2] fix(table): affixed header 1px

---
 src/table/base-table.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/table/base-table.tsx b/src/table/base-table.tsx
index e15ee4300..b67b1662c 100644
--- a/src/table/base-table.tsx
+++ b/src/table/base-table.tsx
@@ -324,7 +324,7 @@ export default defineComponent({
     const affixHeaderHeight = (this.affixHeaderRef?.getBoundingClientRect().height || 0) - IEHeaderWrap;
     const affixHeaderWrapHeight = affixHeaderHeight - barWidth - borderWidth;
     // 两类场景：1. 虚拟滚动，永久显示表头，直到表头消失在可视区域； 2. 表头吸顶，根据滚动情况判断是否显示吸顶表头
-    const headerOpacity = props.headerAffixedTop ? Number(this.showAffixHeader) : 1;
+    const headerOpacity = this.headerAffixedTop ? Number(this.showAffixHeader) : 1;
     const affixHeaderWrapHeightStyle = {
       width: `${this.tableWidth}px`,
       height: `${affixHeaderWrapHeight}px`,
@@ -332,11 +332,11 @@ export default defineComponent({
       marginTop: onlyVirtualScrollBordered ? `${borderWidth}px` : 0,
     };
     // 多级表头左边线缺失
-    const affixedMultipleHeaderLeftBorder = this.bordered && this.isMultipleHeader ? 1 : 0;
+    const affixedLeftBorder = this.bordered ? 1 : 0;
     const affixedHeader = Boolean((this.headerAffixedTop || this.isVirtual) && this.tableWidth) && (
       <div
         ref="affixHeaderRef"
-        style={{ width: `${this.tableWidth - affixedMultipleHeaderLeftBorder}px`, opacity: headerOpacity }}
+        style={{ width: `${this.tableWidth - affixedLeftBorder}px`, opacity: headerOpacity }}
         class={['scrollbar', { [this.tableBaseClass.affixedHeaderElm]: this.headerAffixedTop || this.isVirtual }]}
       >
         <table class={this.tableElmClasses} style={{ ...this.tableElementStyles, width: `${this.tableElmWidth}px` }}>
@@ -383,7 +383,7 @@ export default defineComponent({
       >
         <div
           ref="affixFooterRef"
-          style={{ width: `${this.tableWidth}px`, opacity: Number(this.showAffixFooter) }}
+          style={{ width: `${this.tableWidth - affixedLeftBorder}px`, opacity: Number(this.showAffixFooter) }}
           class={['scrollbar', { [this.tableBaseClass.affixedFooterElm]: this.footerAffixedBottom || this.isVirtual }]}
         >
           <table class={this.tableElmClasses} style={{ ...this.tableElementStyles, width: `${this.tableElmWidth}px` }}>

From 9bc0adfc0144575cf6bde65785c69fed87d8d4aa Mon Sep 17 00:00:00 2001
From: chaishi <yaoyanhuoyi@qq.com>
Date: Wed, 17 Aug 2022 22:22:27 +0800
Subject: [PATCH 2/2] fix(table): refresh table on resize

---
 src/table/hooks/useFixed.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/table/hooks/useFixed.ts b/src/table/hooks/useFixed.ts
index 787101ced..ad6f49dde 100644
--- a/src/table/hooks/useFixed.ts
+++ b/src/table/hooks/useFixed.ts
@@ -10,6 +10,7 @@ import {
   ComputedRef,
 } from '@vue/composition-api';
 import get from 'lodash/get';
+import debounce from 'lodash/debounce';
 import log from '../../_common/js/log';
 import { ClassName, Styles } from '../../common';
 import { BaseTableCol, TableRowData, TdBaseTableProps } from '../type';
@@ -302,11 +303,11 @@ export default function useFixed(
   };
 
   let shadowLastScrollLeft: number;
-  const updateColumnFixedShadow = (target: HTMLElement) => {
-    if (!isFixedColumn.value || !target) return;
+  const updateColumnFixedShadow = (target: HTMLElement, extra?: { skipScrollLimit?: boolean }) => {
+    if (!isFixedColumn || !target) return;
     const { scrollLeft } = target;
     // 只有左右滚动，需要更新固定列阴影
-    if (shadowLastScrollLeft === scrollLeft) return;
+    if (shadowLastScrollLeft === scrollLeft && (!extra || !extra.skipScrollLimit)) return;
     shadowLastScrollLeft = scrollLeft;
     const isShowRight = target.clientWidth + scrollLeft < target.scrollWidth;
     showColumnShadow.left = scrollLeft > 0;
@@ -479,15 +480,15 @@ export default function useFixed(
     { immediate: true },
   );
 
-  const refreshTable = () => {
+  const refreshTable = debounce(() => {
     updateTableWidth();
     updateFixedHeader();
     updateThWidthListHandler();
     if (isFixedColumn.value || isFixedHeader.value) {
       updateFixedStatus();
-      updateColumnFixedShadow(tableContentRef.value);
+      updateColumnFixedShadow(tableContentRef.value, { skipScrollLimit: true });
     }
-  };
+  }, 30);
 
   const onResize = refreshTable;
 
@@ -501,15 +502,14 @@ export default function useFixed(
       }
       clearTimeout(timer);
     });
-    if (isFixedColumn.value || isFixedHeader.value || !notNeedThWidthList.value) {
+    const isWatchResize = isFixedColumn.value || isFixedHeader.value || !notNeedThWidthList.value || !data.value.length;
+    if (isWatchResize) {
       on(window, 'resize', onResize);
     }
   });
 
   onBeforeMount(() => {
-    if (isFixedColumn.value || isFixedHeader.value || !notNeedThWidthList.value) {
-      off(window, 'resize', onResize);
-    }
+    off(window, 'resize', onResize);
   });
 
   const setData = (dataSource: TableRowData[]) => {