From bab8c5bc6ff52baecd76eead10db56878db972c7 Mon Sep 17 00:00:00 2001
From: ZTao-z <1124693098@qq.com>
Date: Sun, 25 Sep 2022 21:11:27 +0800
Subject: [PATCH] fix(table): column props add resizable attribute

---
 src/table/hooks/useColumnResize.ts | 35 +++++++++++++++++-------------
 src/table/thead.tsx                |  4 ++--
 src/table/type.ts                  |  5 +++++
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/table/hooks/useColumnResize.ts b/src/table/hooks/useColumnResize.ts
index cb066a9cef..0a47d8e717 100644
--- a/src/table/hooks/useColumnResize.ts
+++ b/src/table/hooks/useColumnResize.ts
@@ -54,7 +54,7 @@ export default function useColumnResize(
 
   // 表格列宽拖拽事件
   // 只在表头显示拖拽图标
-  const onColumnMouseover = (e: MouseEvent) => {
+  const onColumnMouseover = (e: MouseEvent, col: BaseTableCol<TableRowData>) => {
     if (!resizeLineRef.value) return;
 
     const target = (e.target as HTMLElement).closest('th');
@@ -63,25 +63,30 @@ export default function useColumnResize(
       // 当离右边框的距离不超过 8 时，显示拖拽图标
       const distance = 8;
       if (targetBoundRect.right - e.pageX <= distance) {
-        target.style.cursor = 'col-resize';
-        resizeLineParams.draggingCol = target;
-        resizeLineParams.effectCol = 'next';
+        const colResizable = col.resizable ?? true;
+        if (colResizable) {
+          target.style.cursor = 'col-resize';
+          resizeLineParams.draggingCol = target;
+          resizeLineParams.effectCol = 'next';
+          return;
+        }
       } else if (e.pageX - targetBoundRect.left <= distance) {
         const prevEl = target.previousElementSibling;
         if (prevEl) {
-          target.style.cursor = 'col-resize';
-          resizeLineParams.draggingCol = prevEl as HTMLElement;
-          resizeLineParams.effectCol = 'prev';
-        } else {
-          target.style.cursor = '';
-          resizeLineParams.draggingCol = null;
-          resizeLineParams.effectCol = null;
+          const effectPrevCol = effectColMap.value[col.colKey].prev;
+          const colResizable = effectPrevCol.resizable ?? true;
+          if (colResizable) {
+            target.style.cursor = 'col-resize';
+            resizeLineParams.draggingCol = prevEl as HTMLElement;
+            resizeLineParams.effectCol = 'prev';
+            return;
+          }
         }
-      } else {
-        target.style.cursor = '';
-        resizeLineParams.draggingCol = null;
-        resizeLineParams.effectCol = null;
       }
+      // 重置记录值
+      target.style.cursor = '';
+      resizeLineParams.draggingCol = null;
+      resizeLineParams.effectCol = null;
     }
   };
 
diff --git a/src/table/thead.tsx b/src/table/thead.tsx
index d01c8d677c..d11e502922 100644
--- a/src/table/thead.tsx
+++ b/src/table/thead.tsx
@@ -25,7 +25,7 @@ export interface TheadProps {
   columnResizeParams: {
     resizeLineRef: Ref<HTMLDivElement>;
     resizeLineStyle: CSSProperties;
-    onColumnMouseover: (e: MouseEvent) => void;
+    onColumnMouseover: (e: MouseEvent, col: BaseTableCol<TableRowData>) => void;
     onColumnMousedown: (e: MouseEvent, col: BaseTableCol<TableRowData>) => void;
   };
   resizable: Boolean;
@@ -110,7 +110,7 @@ export default defineComponent({
           const resizeColumnListener = this.resizable
             ? {
                 onMousedown: (e: MouseEvent) => this.columnResizeParams?.onColumnMousedown?.(e, col),
-                onMousemove: (e: MouseEvent) => this.columnResizeParams?.onColumnMouseover?.(e),
+                onMousemove: (e: MouseEvent) => this.columnResizeParams?.onColumnMouseover?.(e, col),
               }
             : {};
           const content = isFunction(col.ellipsisTitle) ? col.ellipsisTitle(h, { col, colIndex: index }) : undefined;
diff --git a/src/table/type.ts b/src/table/type.ts
index 822c534c8b..aca0429fda 100644
--- a/src/table/type.ts
+++ b/src/table/type.ts
@@ -300,6 +300,11 @@ export interface BaseTableCol<T extends TableRowData = TableRowData> {
    * 限制拖拽调整的最小宽度和最大宽度。`resize.minWidth` 默认为 `80`，`resize.maxWidth` 默认为 `600`
    */
   resize?: TableColumnResizeConfig;
+  /**
+   * 是否允许拖拽调整该列大小，仅当 `table.resizable = true` 时生效
+   * @default true
+   */
+  resizable?: boolean;
   /**
    * 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染，插槽名称为 title 的值。优先级高于 render
    */