Merge pull request #1157 from tinna3445/develop

【修复】表格列宽拖拽到最大或最小时，有可能无法二次拖拽
Tencent · Jul 12, 2022 · f92b71d · f92b71d
2 parents 4a7a0b8 + d29d313
commit f92b71d
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/src/table/hooks/useColumnResize.ts b/src/table/hooks/useColumnResize.ts
@@ -56,9 +56,9 @@ export default function useColumnResize(tableContentRef: Ref<HTMLDivElement>, re
     const tableBoundRect = tableContentRef.value?.getBoundingClientRect();
     const resizeLinePos = targetBoundRect.right - tableBoundRect.left;
     const colLeft = targetBoundRect.left - tableBoundRect.left;
-    const minColLen = col.resize?.minWidth || DEFAULT_MIN_WIDTH;
+    const minColWidth = col.resize?.minWidth || DEFAULT_MIN_WIDTH;
     const maxColWidth = col.resize?.maxWidth || DEFAULT_MAX_WIDTH;
-    const minResizeLineLeft = colLeft + minColLen;
+    const minResizeLineLeft = colLeft + minColWidth;
     const maxResizeLineLeft = colLeft + maxColWidth;
 
     // 开始拖拽，记录下鼠标起始位置
@@ -78,10 +78,15 @@ export default function useColumnResize(tableContentRef: Ref<HTMLDivElement>, re
     const onDragEnd = () => {
       if (resizeLineParams.isDragging) {
         // 结束拖拽，更新列宽
-        const width = parseInt(resizeLineStyle.left, 10) - colLeft;
-
+        let width = Math.ceil(parseInt(resizeLineStyle.left, 10) - colLeft) || 0;
+        // 为了避免精度问题，导致 width 宽度超出 [minColWidth, maxColWidth] 的范围，需要对比目标宽度和最小/最大宽度
+        if (width <= minColWidth) {
+          width = minColWidth;
+        } else if (width >= maxColWidth) {
+          width = maxColWidth;
+        }
         // eslint-disable-next-line
-        col.width = `${Math.floor(width)}px`;
+        col.width = `${width}px`;
 
         // 恢复设置
         resizeLineParams.isDragging = false;