修改列伸缩为dom操作

components/apolloTable/component/Table.tsx

@@ -30,6 +30,8 @@ export default class AirTable extends Component<TableProps, TableState> {
 
     grid6: any;
     tableContainer: any;
+    widthHandleWrapper: any;
+    widthHandle: any;
 
     memoizeData: Function;
 
@@ -68,8 +70,6 @@ export default class AirTable extends Component<TableProps, TableState> {
             tableWidth: width,
             tableHeight: height,
             selectedCell: null,
-            showWidthHandle: false,
-            widthHandleLeft: 0,
         };
         this.config = {
             overscanColumnCount: 5,
@@ -220,31 +220,19 @@ 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;
+    onResizeWidth = (e) => {
+        const originLeft = (this.tableContainer && this.tableContainer.getBoundingClientRect().x) || 0;
+        if (this.widthHandle) {
+            this.widthHandle.style.left = `${e.x - originLeft}px`;
         }
-        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;
+    onResizeWidthStart = (e) => {
+        const originLeft = (this.tableContainer && this.tableContainer.getBoundingClientRect().x) || 0;
+        if (this.widthHandleWrapper && this.widthHandle) {
+            this.widthHandleWrapper.style.display = 'block';
+            this.widthHandle.style.left = `${e.x - originLeft}px`;
         }
-        this.setState({
-            showWidthHandle: true,
-            widthHandleLeft: e.x - originLeft,
-        });
     };
     // 列伸缩结束
     onResizeWidthStop = (columnName: string, e, { size }) => {
@@ -256,10 +244,12 @@ export default class AirTable extends Component<TableProps, TableState> {
             }
             newColumns.push(item);
         });
+        if (this.widthHandleWrapper) {
+            this.widthHandleWrapper.style.display = 'none';
+        }
         this.setState(
             {
                 columns: newColumns,
-                showWidthHandle: false,
             },
             () => {
                 this.grid1 && this.grid1.recomputeGridSize();
@@ -301,8 +291,8 @@ export default class AirTable extends Component<TableProps, TableState> {
                             }}
                         />
                     }
-                    // onResize={this.onResizeWidth.bind(this, columnName)}
-                    // onResizeStart={this.onResizeWidthStart.bind(this, columnName)}
+                    onResize={this.onResizeWidth}
+                    onResizeStart={this.onResizeWidthStart}
                     onResizeStop={this.onResizeWidthStop.bind(this, columnName)}
                     draggableOpts={{ enableUserSelectHack: false }}
                 >
@@ -418,7 +408,7 @@ export default class AirTable extends Component<TableProps, TableState> {
 
     render() {
         const { loading, noDataPlaceholder, loadComp } = this.props;
-        const { columns, dataSource, tableWidth = 0, tableHeight = 0, showWidthHandle, widthHandleLeft } = this.state;
+        const { columns, dataSource, tableWidth = 0, tableHeight = 0 } = this.state;
         const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight } = this.config;
         const scrollbarWidth = scrollbarSize() || 0;
         const showColumns = this.memoizeColumns(columns);
@@ -716,9 +706,16 @@ export default class AirTable extends Component<TableProps, TableState> {
                                     </div>
                                     <div
                                         className={styles.widthHandleWrapper}
-                                        style={{ display: showWidthHandle ? 'block' : 'none' }}
+                                        ref={(dom) => {
+                                            this.widthHandleWrapper = dom;
+                                        }}
                                     >
-                                        <div className={styles.widthHandle} style={{ left: widthHandleLeft }} />
+                                        <div
+                                            className={styles.widthHandle}
+                                            ref={(dom) => {
+                                                this.widthHandle = dom;
+                                            }}
+                                        />
                                     </div>
                                 </div>
                             );

components/apolloTable/component/interface.tsx

@@ -80,8 +80,6 @@ export interface TableState {
     tableHeight?: number;
     tableWidth?: number;
     selectedCell?: any;
-    showWidthHandle: boolean;
-    widthHandleLeft: number;
 }
 export interface CommonProps extends TableProps {
     operateConfig?: OperateConfigProps;