fix(table): fix table sticky-header failure with scrollbar (#3170)

arco-design · Jun 7, 2024 · 55eff67 · 55eff67
1 parent 5b9905a
commit 55eff67
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 41 deletions.
diff --git a/packages/web-vue/components/table/__demo__/sticky.md b/packages/web-vue/components/table/__demo__/sticky.md
@@ -18,7 +18,7 @@ Set the header suction via `sticky-header`. The calculation container for the to
 
 ```vue
 <template>
-  <a-table :columns="columns" :data="data" :sticky-header="100"/>
+  <a-table :columns="columns" :data="data" :sticky-header="60"/>
 </template>
 
 <script>

diff --git a/packages/web-vue/components/table/__test__/__snapshots__/demo.test.ts.snap b/packages/web-vue/components/table/__test__/__snapshots__/demo.test.ts.snap
@@ -3193,8 +3193,8 @@ exports[`<table> demo: render [sticky] correctly 1`] = `
     <div class=\\"arco-table-container arco-table-scroll-y\\">
       <div class=\\"arco-scrollbar arco-scrollbar-type-embed\\" style=\\"height: 100%;\\">
         <div class=\\"arco-scrollbar-container arco-table-content\\">
-          <div class=\\"arco-scrollbar arco-scrollbar-type-embed\\">
-            <div class=\\"arco-scrollbar-container arco-table-header arco-table-header-sticky\\" style=\\"top: 100px;\\">
+          <div class=\\"arco-scrollbar arco-scrollbar-type-embed arco-table-header-sticky\\" style=\\"top: 60px;\\">
+            <div class=\\"arco-scrollbar-container arco-table-header\\">
               <table class=\\"arco-table-element\\" cellpadding=\\"0\\" cellspacing=\\"0\\">
                 <colgroup>
                   <col>

diff --git a/packages/web-vue/components/table/table.tsx b/packages/web-vue/components/table/table.tsx
@@ -1708,36 +1708,6 @@ export default defineComponent({
       return null;
     };
 
-    const renderVirtualListBody = () => {
-      return (
-        <ClientOnly>
-          <VirtualList
-            v-slots={{
-              item: ({
-                item,
-                index,
-              }: {
-                item: TableDataWithRaw;
-                index: number;
-              }) => renderRecord(item, index),
-            }}
-            ref={virtualComRef}
-            class={`${prefixCls}-body`}
-            data={flattenData.value}
-            itemKey="_key"
-            type="table"
-            outerAttrs={{
-              class: `${prefixCls}-element`,
-              style: contentStyle.value,
-            }}
-            {...props.virtualListProps}
-            onResize={handleTbodyResize}
-            onScroll={handleScroll}
-          />
-        </ClientOnly>
-      );
-    };
-
     const renderExpandBtn = (
       record: TableDataWithRaw,
       stopPropagation = true
@@ -2058,14 +2028,17 @@ export default defineComponent({
 
     const renderContent = () => {
       if (splitTable.value) {
-        const style: CSSProperties = {};
-        if (hasScrollBar.value) {
-          style.overflowY = 'scroll';
-        }
-        if (isNumber(props.stickyHeader)) {
-          style.top = `${props.stickyHeader}px`;
+        const top = isNumber(props.stickyHeader)
+          ? `${props.stickyHeader}px`
+          : undefined;
+
+        const mergeOuterClass = [scrollbarProps.value?.outerClass];
+        if (props.stickyHeader) {
+          mergeOuterClass.push(`${prefixCls}-header-sticky`);
         }
 
+        const mergeOuterStyle = { top, ...scrollbarProps.value?.outerStyle };
+
         const Component = displayScrollbar.value ? Scrollbar : 'div';
 
         return (
@@ -2075,14 +2048,22 @@ export default defineComponent({
                 ref={theadComRef}
                 class={[
                   `${prefixCls}-header`,
-                  { [`${prefixCls}-header-sticky`]: props.stickyHeader },
+                  {
+                    [`${prefixCls}-header-sticky`]:
+                      props.stickyHeader && !displayScrollbar.value,
+                  },
                 ]}
-                style={style}
+                style={{
+                  overflowY: hasScrollBar.value ? 'scroll' : undefined,
+                  top: !displayScrollbar.value ? top : undefined,
+                }}
                 {...(scrollbar.value
                   ? {
                       hide: flattenData.value.length !== 0,
                       disableVertical: true,
                       ...scrollbarProps.value,
+                      outerClass: mergeOuterClass,
+                      outerStyle: mergeOuterStyle,
                     }
                   : undefined)}
               >