左侧固定列可滑动

components/apolloTable/component/Table.less

@@ -20,6 +20,7 @@
         position: absolute;
         left: 0;
         z-index: 1;
+        overflow: hidden;
     }
     .centerContainer {
         display: flex;
@@ -55,14 +56,13 @@
 }
 
 .sideGrid {
-    overflow: hidden !important;
+    //overflow: hidden !important;
     outline: none;
 }
 .centerGrid {
     outline: none;
 }
 .bodyRow {
-
 }
 .bodyCell {
     font-size: 20px;
@@ -103,17 +103,34 @@
     left: 0;
     right: 0;
     pointer-events: none;
+    z-index: 2;
 }
 .defaultEmpty {
     padding-top: 100px;
 }
-.handleWidth{
+.widthHandleWrapper {
+    position: absolute;
+    cursor: ew-resize;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.4);
+    z-index: 20;
+    display: none;
+    .widthHandle {
+        position: absolute;
+        cursor: ew-resize;
+        width: 2px;
+        height: 100%;
+        background-color: rgb(33, 150, 243);
+    }
+}
+.handleWidth {
     position: absolute;
-    width: 10px;
+    width: 2px;
     height: 100%;
     bottom: 0;
-    right: -5px;
-    cursor: col-resize;
+    right: -1px;
+    cursor: ew-resize;
     z-index: 1;
     background: #ececec;
 }

components/apolloTable/component/Table.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import memoizeOne from 'memoize-one';
 import { Empty, Spin } from 'antd';
 import { ScrollSync, Grid, AutoSizer } from 'react-virtualized';
-import { Resizable } from 'react-resizable';
+import { Resizable, ResizableBox } from 'react-resizable';
 import _ from 'lodash';
 import scrollbarSize from 'dom-helpers/scrollbarSize';
 import styles from './Table.less';
@@ -29,6 +29,7 @@ export default class AirTable extends Component<TableProps, TableState> {
     grid5: any;
 
     grid6: any;
+    tableContainer: any;
 
     memoizeData: Function;
 
@@ -67,6 +68,8 @@ export default class AirTable extends Component<TableProps, TableState> {
             tableWidth: width,
             tableHeight: height,
             selectedCell: null,
+            showWidthHandle: false,
+            widthHandleLeft: 0,
         };
         this.config = {
             overscanColumnCount: 5,
@@ -218,6 +221,33 @@ export default class AirTable extends Component<TableProps, TableState> {
 
     // 列伸缩回调
     onResizeWidth = (columnName: string, e, { size }) => {
+        let originLeft =
+            this.tableContainer && this.tableContainer.offsetParent.offsetParent.offsetParent.style.paddingLeft;
+        if (originLeft) {
+            originLeft = originLeft.replace(/[a-zA-Z]/gi, '');
+        } else {
+            originLeft = 0;
+        }
+        this.setState({
+            widthHandleLeft: e.x - originLeft,
+        });
+    };
+    // 列伸缩开始
+    onResizeWidthStart = (columnName: string, e, { size }) => {
+        let originLeft =
+            this.tableContainer && this.tableContainer.offsetParent.offsetParent.offsetParent.style.paddingLeft;
+        if (originLeft) {
+            originLeft = originLeft.replace(/[a-zA-Z]/gi, '');
+        } else {
+            originLeft = 0;
+        }
+        this.setState({
+            showWidthHandle: true,
+            widthHandleLeft: e.x - originLeft,
+        });
+    };
+    // 列伸缩结束
+    onResizeWidthStop = (columnName: string, e, { size }) => {
         const { columns } = this.state;
         const newColumns: any = [];
         columns.map((item) => {
@@ -229,6 +259,7 @@ export default class AirTable extends Component<TableProps, TableState> {
         this.setState(
             {
                 columns: newColumns,
+                showWidthHandle: false,
             },
             () => {
                 this.grid1 && this.grid1.recomputeGridSize();
@@ -259,7 +290,8 @@ export default class AirTable extends Component<TableProps, TableState> {
             requiredFlag,
         } = showColumns[columnIndex];
         return (
-            <Resizable
+            <div className={styles.headerCell} key={key} style={style}>
+                <ResizableBox
                     width={style.width}
                     handle={
                         <span
@@ -269,10 +301,11 @@ export default class AirTable extends Component<TableProps, TableState> {
                             }}
                         />
                     }
-                onResize={this.onResizeWidth.bind(this, columnName)}
+                    // onResize={this.onResizeWidth.bind(this, columnName)}
+                    // onResizeStart={this.onResizeWidthStart.bind(this, columnName)}
+                    onResizeStop={this.onResizeWidthStop.bind(this, columnName)}
                     draggableOpts={{ enableUserSelectHack: false }}
                 >
-                <div className={styles.headerCell} key={key} style={style}>
                     <Column
                         columnType={String(columnType)}
                         columnName={columnName}
@@ -288,8 +321,8 @@ export default class AirTable extends Component<TableProps, TableState> {
                         icon={icon}
                         required={requiredFlag}
                     />
+                </ResizableBox>
             </div>
-            </Resizable>
         );
     };
 
@@ -383,7 +416,7 @@ export default class AirTable extends Component<TableProps, TableState> {
 
     render() {
         const { loading, noDataPlaceholder, loadComp } = this.props;
-        const { columns, dataSource, tableWidth = 0, tableHeight = 0 } = this.state;
+        const { columns, dataSource, tableWidth = 0, tableHeight = 0, showWidthHandle, widthHandleLeft } = this.state;
         const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight } = this.config;
         const scrollbarWidth = scrollbarSize() || 0;
         const showColumns = this.memoizeColumns(columns);
@@ -428,6 +461,9 @@ export default class AirTable extends Component<TableProps, TableState> {
                                     style={{
                                         paddingRight: this.props.onScroll ? paddingRight : 0,
                                     }}
+                                    ref={(dom) => {
+                                        this.tableContainer = dom;
+                                    }}
                                 >
                                     {totalWidth > tableWidth && leftCount > 0 && (
                                         <div
@@ -489,8 +525,12 @@ export default class AirTable extends Component<TableProps, TableState> {
                                                             columns: showColumns,
                                                             showColumns: leftColumns,
                                                         })}
+                                                        onScroll={(...arg: Array<Object>) => {
+                                                            onScroll(...arg);
+                                                            this.onScroll(arg[0]);
+                                                        }}
                                                         columnCount={leftCount}
-                                                        width={leftWidth}
+                                                        width={leftWidth + scrollbarWidth}
                                                         rowHeight={rowHeight}
                                                         rowCount={rowCount}
                                                         height={totalHeight - scrollbarWidth}
@@ -569,6 +609,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                                                                             onScroll(...arg);
                                                                             this.onScroll(arg[0]);
                                                                         }}
+                                                                        scrollTop={scrollTop}
                                                                         height={totalHeight}
                                                                         cellRenderer={this.renderBodyCell.bind(this, {
                                                                             showColumns,
@@ -671,6 +712,12 @@ export default class AirTable extends Component<TableProps, TableState> {
                                     <div className={styles.loading} style={{ top: `${totalHeight / 2}px` }}>
                                         {loading && (loadComp ? loadComp : <Spin />)}
                                     </div>
+                                    <div
+                                        className={styles.widthHandleWrapper}
+                                        style={{ display: showWidthHandle ? 'block' : 'none' }}
+                                    >
+                                        <div className={styles.widthHandle} style={{ left: widthHandleLeft }} />
+                                    </div>
                                 </div>
                             );
                         }}

components/apolloTable/component/interface.tsx

@@ -79,6 +79,8 @@ export interface TableState {
     tableHeight?: number;
     tableWidth?: number;
     selectedCell?: any;
+    showWidthHandle: boolean;
+    widthHandleLeft: number;
 }
 export interface CommonProps extends TableProps {
     operateConfig?: OperateConfigProps;
@@ -120,7 +122,7 @@ export interface CellProps {
     contentMenu?: any;
     selectedCell?: any;
     changeSelectedCell?: Function;
-    position:string;
+    position: string;
 }
 
 export interface EditCellProps {