修改apolloTable dragFixed

components/apolloTable/component/DragFixed.tsx

@@ -3,9 +3,9 @@ import { ResizableBox } from 'react-resizable';
 import styles from './DragFixed.less';
 
 const DragFixed = (props: any) => {
-    const { initLeft, initTop, onResizeStart, tableWidth, showColumns, columnWidth, columns, onResizeStop } = props;
+    const { tableId, initLeft, initTop, onResizeStart, showColumns, columnWidth, columns, onResizeStop } = props;
     // 表格
-    const container: any = document.querySelector('#tableContainer');
+    const container: any = document.querySelector(`#apolloTable_${tableId}`);
     // 滑块wrap
     const handleWrap: any = document.querySelector('#leftFixedHandleWrap');
     // 滑块
@@ -44,11 +44,11 @@ const DragFixed = (props: any) => {
     };
 
     const onResizeHandle = (e: any) => {
-        const originLeft = container.getBoundingClientRect().x || 0;
-        let inTableLeft = e.x - originLeft;
+        const containerRect: any = container.getBoundingClientRect();
+        let inTableLeft = e.x - containerRect.x;
         // left不能超过表格一半宽度
-        if (inTableLeft > tableWidth / 2) {
-            inTableLeft = tableWidth / 2;
+        if (inTableLeft > containerRect.width / 2) {
+            inTableLeft = containerRect.width / 2;
         }
         let fixedWidth = 0;
         let index = 0;
@@ -60,14 +60,7 @@ const DragFixed = (props: any) => {
                 break;
             }
         }
-        let leftHandleLeft = 0;
-        if (inTableLeft > fixedWidth - (showColumns[index].width || columnWidth) / 2) {
-            // left位于当前列中间偏右
-            leftHandleLeft = fixedWidth;
-        } else {
-            // left位于当前列中间偏左
-            leftHandleLeft = fixedWidth - (showColumns[index].width || columnWidth);
-        }
+        const leftHandleLeft = fixedWidth - (showColumns[index].width || columnWidth);
         // 拖动时显示分割线
         dividerWrap.style.display = 'block';
         // 分割线取列的边侧位置

components/apolloTable/component/RightDragFixed.tsx

@@ -4,18 +4,18 @@ import styles from './DragFixed.less';
 
 const DragFixed = (props: any) => {
     const {
+        tableId,
         initLeft,
         initTop,
         onResizeStart,
-        tableWidth,
         showColumns,
         columnWidth,
         columns,
         onResizeStop,
-        scrollbarWidth,
+        paddingRight,
     } = props;
     // 表格
-    const container: any = document.querySelector('#tableContainer');
+    const container: any = document.querySelector(`#apolloTable_${tableId}`);
     // 滑块wrap
     const handleWrap: any = document.querySelector('#rightFixedHandleWrap');
     // 滑块
@@ -57,8 +57,8 @@ const DragFixed = (props: any) => {
         const containerRect: any = container.getBoundingClientRect();
         let inTableRight = containerRect.right - e.x;
         // left不能超过表格一半宽度
-        if (inTableRight > tableWidth / 2) {
-            inTableRight = tableWidth / 2;
+        if (inTableRight > containerRect.width / 2) {
+            inTableRight = containerRect.width / 2;
         }
         let fixedWidth = 0;
         let index = 0;
@@ -70,20 +70,17 @@ const DragFixed = (props: any) => {
                 break;
             }
         }
+
         let rightHandleLeft = fixedWidth - (showColumns[index].width || columnWidth);
-        // if (inTableRight > fixedWidth - (showColumns[index].width || columnWidth) / 2) {
-        //     // left位于当前列中间偏右
-        //     rightHandleLeft = fixedWidth;
-        // } else {
-        //     // left位于当前列中间偏左
-        //     rightHandleLeft = fixedWidth - (showColumns[index].width || columnWidth);
-        // }
+        if (fixedWidth === inTableRight) {
+            rightHandleLeft = fixedWidth;
+        }
         // 拖动时显示分割线
         dividerWrap.style.display = 'block';
         // 分割线取列的边侧位置
-        divider.style.left = `${containerRect.width - scrollbarWidth - rightHandleLeft}px`;
+        divider.style.left = `${containerRect.width - paddingRight - rightHandleLeft}px`;
         // 拖动线取鼠标位置
-        handleWrap.style.left = `${containerRect.width - scrollbarWidth - inTableRight}px`;
+        handleWrap.style.left = `${containerRect.width - paddingRight - inTableRight}px`;
         // 滑动过程中滑块始终显示
         // 滑块wrap添加hovered样式
         handleWrap.classList.add(styles.hovered);
@@ -92,6 +89,7 @@ const DragFixed = (props: any) => {
     };
 
     const onResizeStopHandle = () => {
+        const containerRect: any = container.getBoundingClientRect();
         // 当前固定列宽度为分割线的left
         const fixedWidth: string = divider.style.left;
         // 样式转数值
@@ -110,7 +108,7 @@ const DragFixed = (props: any) => {
         // 计算获取固定列
         for (let i = showColumns.length - 1; i >= 0; i--) {
             leftFixedWidth += showColumns[i].width || columnWidth;
-            if (leftFixedWidth <= tableWidth + scrollbarWidth - Number(fixedWidthNum)) {
+            if (leftFixedWidth <= containerRect.width - paddingRight - Number(fixedWidthNum)) {
                 fixedCol[showColumns[i].columnName] = 1;
             } else {
                 break;

components/apolloTable/component/Table.less

@@ -117,7 +117,8 @@
     background-color: rgba(255, 255, 255, 0.4);
     z-index: 4;
     display: none;
-    pointer-events: none;
+    //pointer-events: none;
+    user-select: none;
     .widthHandle {
         position: absolute;
         cursor: ew-resize;

components/apolloTable/component/Table.tsx

@@ -639,6 +639,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                                     )}
                                     {canFixed && (
                                         <LeftDragFixed
+                                            tableId={tableId}
                                             initLeft={leftWidth}
                                             initTop={headerHeight}
                                             tableWidth={tableWidth}
@@ -741,13 +742,14 @@ export default class AirTable extends Component<TableProps, TableState> {
                                     </div>
                                     {canFixed && (
                                         <RightDragFixed
+                                            tableId={tableId}
                                             initLeft={tableWidth - rightWidth}
                                             initTop={headerHeight}
                                             tableWidth={tableWidth}
                                             showColumns={showColumns}
                                             columnWidth={columnWidth}
                                             columns={columns}
-                                            scrollbarWidth={scrollbarWidth}
+                                            paddingRight={paddingRight}
                                             onResizeStart={this.onResizeStartRightDragFixed}
                                             onResizeStop={this.onResizeStopLeftDragFixed}
                                         />