fix: auto hide table scrollbar #4484

close #4484

Author: tangjinzhou

components/vc-table/src/BaseTable.jsx

@@ -132,16 +132,13 @@ const BaseTable = {
 
   render() {
     const { sComponents: components, prefixCls, scroll, data } = this.table;
-    const { expander, tableClassName, hasHead, hasBody, fixed, isAnyColumnsFixed } = this.$props;
+    const { expander, tableClassName, hasHead, hasBody, fixed } = this.$props;
     const columns = this.getColumns();
     const tableStyle = {};
 
     if (!fixed && scroll.x) {
-      // 当有固定列时，width auto 会导致 body table 的宽度撑不开，从而固定列无法对齐
-      // 详情见：https://github.com/ant-design/ant-design/issues/22160
-      const tableWidthScrollX = isAnyColumnsFixed ? 'max-content' : 'auto';
       // not set width, then use content fixed width
-      tableStyle.width = scroll.x === true ? tableWidthScrollX : scroll.x;
+      tableStyle.width = scroll.x === true ? 'auto' : scroll.x;
       tableStyle.width =
         typeof tableStyle.width === 'number' ? `${tableStyle.width}px` : tableStyle.width;
     }

components/vc-table/src/BodyTable.jsx

@@ -1,13 +1,11 @@
 import { inject } from 'vue';
-import PropTypes, { withUndefined } from '../../_util/vue-types';
-import { measureScrollbar } from './utils';
+import PropTypes from '../../_util/vue-types';
 import BaseTable from './BaseTable';
 
 export default {
   name: 'BodyTable',
   inheritAttrs: false,
   props: {
-    fixed: withUndefined(PropTypes.oneOfType([PropTypes.string, PropTypes.looseBool])),
     columns: PropTypes.array.isRequired,
     tableClassName: PropTypes.string.isRequired,
     handleBodyScroll: PropTypes.func.isRequired,
@@ -25,7 +23,6 @@ export default {
     const { prefixCls, scroll } = this.table;
     const {
       columns,
-      fixed,
       tableClassName,
       getRowKey,
       handleBodyScroll,
@@ -35,34 +32,26 @@ export default {
     } = this;
     let { useFixedHeader, saveRef } = this.table;
     const bodyStyle = { ...this.table.bodyStyle };
-    const innerBodyStyle = {};
-
-    if (scroll.x || fixed) {
-      bodyStyle.overflowX = bodyStyle.overflowX || 'scroll';
-      // Fix weired webkit render bug
-      // https://github.com/ant-design/ant-design/issues/7783
-      bodyStyle.WebkitTransform = 'translate3d (0, 0, 0)';
-    }
 
     if (scroll.y) {
       // maxHeight will make fixed-Table scrolling not working
       // so we only set maxHeight to body-Table here
       let maxHeight = bodyStyle.maxHeight || scroll.y;
       maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
-      if (fixed) {
-        innerBodyStyle.maxHeight = maxHeight;
-        innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
-      } else {
-        bodyStyle.maxHeight = maxHeight;
-      }
+
+      bodyStyle.maxHeight = maxHeight;
       bodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
       useFixedHeader = true;
+    }
 
-      // Add negative margin bottom for scroll bar overflow bug
-      const scrollbarWidth = measureScrollbar({ direction: 'vertical' });
-      if (scrollbarWidth > 0 && fixed) {
-        bodyStyle.marginBottom = `-${scrollbarWidth}px`;
-        bodyStyle.paddingBottom = '0px';
+    if (scroll.x) {
+      bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
+      // Fix weired webkit render bug
+      // https://github.com/ant-design/ant-design/issues/7783
+      bodyStyle.WebkitTransform = 'translate3d (0, 0, 0)';
+
+      if (!scroll.y) {
+        bodyStyle.overflowY = 'hidden';
       }
     }
 
@@ -71,37 +60,13 @@ export default {
         tableClassName={tableClassName}
         hasHead={!useFixedHeader}
         hasBody
-        fixed={fixed}
         columns={columns}
         expander={expander}
         getRowKey={getRowKey}
         isAnyColumnsFixed={isAnyColumnsFixed}
       />
     );
 
-    if (fixed && columns.length) {
-      let refName;
-      if (columns[0].fixed === 'left' || columns[0].fixed === true) {
-        refName = 'fixedColumnsBodyLeft';
-      } else if (columns[0].fixed === 'right') {
-        refName = 'fixedColumnsBodyRight';
-      }
-      delete bodyStyle.overflowX;
-      delete bodyStyle.overflowY;
-      return (
-        <div key="bodyTable" class={`${prefixCls}-body-outer`} style={{ ...bodyStyle }}>
-          <div
-            class={`${prefixCls}-body-inner`}
-            style={innerBodyStyle}
-            ref={saveRef(refName)}
-            onWheel={handleWheel}
-            onScroll={handleBodyScroll}
-          >
-            {baseTable}
-          </div>
-        </div>
-      );
-    }
     // Should provides `tabindex` if use scroll to enable keyboard scroll
     const useTabIndex = scroll && (scroll.x || scroll.y);
 

components/vc-table/src/Table.jsx

@@ -501,41 +501,15 @@ export default defineComponent({
       );
     },
 
-    renderLeftFixedTable() {
-      const { prefixCls } = this;
-
-      return (
-        <div key="left" class={`${prefixCls}-fixed-left`}>
-          {this.renderTable({
-            columns: this.columnManager.leftColumns.value,
-            fixed: 'left',
-          })}
-        </div>
-      );
-    },
-    renderRightFixedTable() {
-      const { prefixCls } = this;
-
-      return (
-        <div class={`${prefixCls}-fixed-right`}>
-          {this.renderTable({
-            columns: this.columnManager.rightColumns.value,
-            fixed: 'right',
-          })}
-        </div>
-      );
-    },
-
     renderTable(options) {
-      const { columns, fixed, isAnyColumnsFixed } = options;
+      const { columns, isAnyColumnsFixed } = options;
       const { prefixCls, scroll = {} } = this;
-      const tableClassName = scroll.x || fixed ? `${prefixCls}-fixed` : '';
+      const tableClassName = scroll.x ? `${prefixCls}-fixed` : '';
 
       const headTable = (
         <HeadTable
           key="head"
           columns={columns}
-          fixed={fixed}
           tableClassName={tableClassName}
           handleBodyScrollLeft={this.handleBodyScrollLeft}
           expander={this.expander}
@@ -546,7 +520,6 @@ export default defineComponent({
         <BodyTable
           key="body"
           columns={columns}
-          fixed={fixed}
           tableClassName={tableClassName}
           getRowKey={this.getRowKey}
           handleWheel={this.handleWheel}