add react-resizeable

components/apolloTable/component/Table.less

@@ -107,3 +107,13 @@
 .defaultEmpty {
     padding-top: 100px;
 }
+.handleWidth{
+    position: absolute;
+    width: 10px;
+    height: 100%;
+    bottom: 0;
+    right: -5px;
+    cursor: col-resize;
+    z-index: 1;
+    background: #ececec;
+}

components/apolloTable/component/Table.tsx

@@ -3,6 +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 _ from 'lodash';
 import scrollbarSize from 'dom-helpers/scrollbarSize';
 import styles from './Table.less';
@@ -215,6 +216,31 @@ export default class AirTable extends Component<TableProps, TableState> {
         });
     };
 
+    // 列伸缩回调
+    onResizeWidth = (columnName: string, e, { size }) => {
+        const { columns } = this.state;
+        const newColumns: any = [];
+        columns.map((item) => {
+            if (item.columnName === columnName) {
+                item.width = size.width;
+            }
+            newColumns.push(item);
+        });
+        this.setState(
+            {
+                columns: newColumns,
+            },
+            () => {
+                this.grid1 && this.grid1.recomputeGridSize();
+                this.grid2 && this.grid2.recomputeGridSize();
+                this.grid3 && this.grid3.recomputeGridSize();
+                this.grid4 && this.grid4.recomputeGridSize();
+                this.grid5 && this.grid5.recomputeGridSize();
+                this.grid6 && this.grid6.recomputeGridSize();
+            },
+        );
+    };
+
     // 渲染表头
     renderHeaderCell = (
         { showColumns, position }: { showColumns: ColumnProps[]; position?: string },
@@ -233,6 +259,19 @@ export default class AirTable extends Component<TableProps, TableState> {
             requiredFlag,
         } = showColumns[columnIndex];
         return (
+            <Resizable
+                width={style.width}
+                handle={
+                    <span
+                        className={styles.handleWidth}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                        }}
+                    />
+                }
+                onResize={this.onResizeWidth.bind(this, columnName)}
+                draggableOpts={{ enableUserSelectHack: false }}
+            >
                 <div className={styles.headerCell} key={key} style={style}>
                     <Column
                         columnType={String(columnType)}
@@ -250,6 +289,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                         required={requiredFlag}
                     />
                 </div>
+            </Resizable>
         );
     };
 
@@ -628,7 +668,9 @@ export default class AirTable extends Component<TableProps, TableState> {
                                         </div>
                                     )}
                                     <div className={styles.fillHandleWrapper} />
-                                    <div className={styles.loading} style={{ top: `${totalHeight / 2}px` }}>{loading && (loadComp ? loadComp : <Spin />)}</div>
+                                    <div className={styles.loading} style={{ top: `${totalHeight / 2}px` }}>
+                                        {loading && (loadComp ? loadComp : <Spin />)}
+                                    </div>
                                 </div>
                             );
                         }}