From a6154bbe65843b8ef2226dca7027b9d7e59128cb Mon Sep 17 00:00:00 2001
From: ZTao-z <1124693098@qq.com>
Date: Mon, 29 Aug 2022 11:00:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(table):=20=E5=85=81=E8=AE=B8=E5=9C=A8?=
 =?UTF-8?q?=E8=A1=A8=E5=A4=B4=E5=88=86=E5=89=B2=E7=BA=BF=E4=B8=80=E5=AE=9A?=
 =?UTF-8?q?=E8=8C=83=E5=9B=B4=E5=86=85=E8=A7=A6=E5=8F=91=E5=88=97=E5=AE=BD?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=80=BB=E8=BE=91=20(#1522)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(table): allow resizing column within distance range

* fix(table): column width add restrictive condition
---
 src/table/hooks/useColumnResize.ts | 46 +++++++++++++++++++++++-------
 src/table/thead.tsx                |  8 +++++-
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/table/hooks/useColumnResize.ts b/src/table/hooks/useColumnResize.ts
index 3d15758826..0e0db4d911 100644
--- a/src/table/hooks/useColumnResize.ts
+++ b/src/table/hooks/useColumnResize.ts
@@ -19,6 +19,7 @@ export default function useColumnResize(
     isDragging: false,
     draggingCol: null as HTMLElement,
     draggingStart: 0,
+    effectCol: null as 'next' | 'prev' | null,
   };
 
   const resizeLineStyle = reactive({
@@ -41,25 +42,41 @@ export default function useColumnResize(
     const targetBoundRect = target.getBoundingClientRect();
     if (!resizeLineParams.isDragging) {
       // 当离右边框的距离不超过 8 时，显示拖拽图标
-      if (!resizeLineParams.isDragging) {
-        const distance = 8;
-        if (targetBoundRect.right - e.pageX <= distance) {
+      const distance = 8;
+      if (targetBoundRect.right - e.pageX <= distance) {
+        target.style.cursor = 'col-resize';
+        resizeLineParams.draggingCol = target;
+        resizeLineParams.effectCol = 'next';
+      } else if (e.pageX - targetBoundRect.left <= distance) {
+        const prevEl = target.previousElementSibling;
+        if (prevEl) {
           target.style.cursor = 'col-resize';
-          resizeLineParams.draggingCol = target;
+          resizeLineParams.draggingCol = prevEl as HTMLElement;
+          resizeLineParams.effectCol = 'prev';
         } else {
           target.style.cursor = '';
           resizeLineParams.draggingCol = null;
+          resizeLineParams.effectCol = null;
         }
+      } else {
+        target.style.cursor = '';
+        resizeLineParams.draggingCol = null;
+        resizeLineParams.effectCol = null;
       }
     }
   };
 
   // 调整表格列宽
-  const onColumnMousedown = (e: MouseEvent, col: BaseTableCol<TableRowData>, nearCol: BaseTableCol<TableRowData>) => {
+  const onColumnMousedown = (
+    e: MouseEvent,
+    col: BaseTableCol<TableRowData>,
+    effectNextCol: BaseTableCol<TableRowData>,
+    effectPrevCol: BaseTableCol<TableRowData>,
+  ) => {
     // 非 resize 的点击，不做处理
     if (!resizeLineParams.draggingCol) return;
 
-    const target = (e.target as HTMLElement).closest('th');
+    const target = resizeLineParams.draggingCol;
     const targetBoundRect = target.getBoundingClientRect();
     const tableBoundRect = tableContentRef.value?.getBoundingClientRect();
     const resizeLinePos = targetBoundRect.right - tableBoundRect.left;
@@ -106,15 +123,24 @@ export default function useColumnResize(
     const onDragEnd = () => {
       if (resizeLineParams.isDragging) {
         // 结束拖拽，更新列宽
-        const width = Math.ceil(parseInt(resizeLineStyle.left, 10) - colLeft) || 0;
+        let width = Math.ceil(parseInt(resizeLineStyle.left, 10) - colLeft) || 0;
         // 为了避免精度问题，导致 width 宽度超出 [minColWidth, maxColWidth] 的范围，需要对比目标宽度和最小/最大宽度
-        // eslint-disable-next-line
-        // col.width = `${Math.max(Math.min(width, maxColWidth), minColWidth)}px`;
-        setThWidthListByColumnDrag(col, width, nearCol);
+        if (width <= minColWidth) {
+          width = minColWidth;
+        } else if (width >= maxColWidth) {
+          width = maxColWidth;
+        }
+        // 更新列宽
+        if (resizeLineParams.effectCol === 'next') {
+          setThWidthListByColumnDrag(col, width, effectNextCol);
+        } else if (resizeLineParams.effectCol === 'prev') {
+          setThWidthListByColumnDrag(effectPrevCol, width, col);
+        }
 
         // 恢复设置
         resizeLineParams.isDragging = false;
         resizeLineParams.draggingCol = null;
+        resizeLineParams.effectCol = null;
         target.style.cursor = '';
         resizeLineStyle.display = 'none';
         resizeLineStyle.left = '0';
diff --git a/src/table/thead.tsx b/src/table/thead.tsx
index 6e5e7e8048..a2b0b6683b 100644
--- a/src/table/thead.tsx
+++ b/src/table/thead.tsx
@@ -26,7 +26,12 @@ export interface TheadProps {
     resizeLineRef: Ref<HTMLDivElement>;
     resizeLineStyle: CSSProperties;
     onColumnMouseover: (e: MouseEvent) => void;
-    onColumnMousedown: (e: MouseEvent, col: BaseTableCol<TableRowData>, nearCol: BaseTableCol<TableRowData>) => void;
+    onColumnMousedown: (
+      e: MouseEvent,
+      col: BaseTableCol<TableRowData>,
+      effectNextCol: BaseTableCol<TableRowData>,
+      effectPrevCol: BaseTableCol<TableRowData>,
+    ) => void;
   };
   resizable: Boolean;
 }
@@ -114,6 +119,7 @@ export default defineComponent({
                     e,
                     col,
                     index < row.length - 1 ? row[index + 1] : row[index - 1],
+                    index > 0 ? row[index - 1] : row[index + 1],
                   ),
                 onMousemove: (e: MouseEvent) => this.columnResizeParams?.onColumnMouseover?.(e),
               }