diff --git a/components/apolloTable/component/DragFixed.tsx b/components/apolloTable/component/DragFixed.tsx index 280d66a1392a173f2d79d7299e18723f27cf834e..7b3284b93a187f6c540dabd789d5fdceee52050b 100644 --- a/components/apolloTable/component/DragFixed.tsx +++ b/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'; // 分割线取列的边侧位置 diff --git a/components/apolloTable/component/RightDragFixed.tsx b/components/apolloTable/component/RightDragFixed.tsx index b9e60c697a76b9a1f44f5a8dbe42f49159cbe4e3..655cb822e6487df6f4b96b7929ddb0b540c1347e 100644 --- a/components/apolloTable/component/RightDragFixed.tsx +++ b/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; diff --git a/components/apolloTable/component/Table.less b/components/apolloTable/component/Table.less index 4d8dfffc52b5ea84c9b46410acb592b8a44b7a3e..e499b6a1e2a3523241648cb6d2fe7e7c08bb186a 100644 --- a/components/apolloTable/component/Table.less +++ b/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; diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx index b50f4684c4cf6c3a5cc240a5b62785e3f4099e35..b67f27be2464d9339f07d80017be3d26e778d25a 100644 --- a/components/apolloTable/component/Table.tsx +++ b/components/apolloTable/component/Table.tsx @@ -639,6 +639,7 @@ export default class AirTable extends Component { )} {canFixed && ( { {canFixed && (