From 5a6e6b727a2a1e2f93566a409b370866544c37fd Mon Sep 17 00:00:00 2001 From: caiozhang Date: Wed, 12 Apr 2023 10:38:17 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix(table):=20=E4=BF=AE=E5=A4=8Dtable?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=BF=80=E6=B4=BB=E5=B7=A6=E4=BE=A7=E5=9B=BA?= =?UTF-8?q?=E5=AE=9A=E5=88=97=E6=97=B6=E6=8B=96=E6=8B=BD=E5=BC=82=E5=B8=B8?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/table/hooks/useColumnResize.ts | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/table/hooks/useColumnResize.ts b/src/table/hooks/useColumnResize.ts index e63161e53..80323ff8a 100644 --- a/src/table/hooks/useColumnResize.ts +++ b/src/table/hooks/useColumnResize.ts @@ -186,6 +186,16 @@ export default function useColumnResize(params: { }; }; + const getFixedToLeftResizeInfo = (targetBoundRect: DOMRect, tableBoundRect: DOMRect) => { + const resizeLinePos = targetBoundRect.left - tableBoundRect.left; + const colLeft = targetBoundRect.left - tableBoundRect.left; + return { + resizeLinePos, + minResizeLineLeft: colLeft, + maxResizeLineLeft: colLeft, + }; + }; + const getTotalTableWidth = (thWidthList: { [key: string]: number }): number => { let tableWidth = 0; leafColumns.value.forEach((col) => { @@ -194,6 +204,15 @@ export default function useColumnResize(params: { return tableWidth; }; + const getOtherResizeInfo = ( + col: BaseTableCol, + effectPrevCol: BaseTableCol, + targetBoundRect: DOMRect, + tableBoundRect: DOMRect, + ) => effectPrevCol + ? getNormalResizeInfo(col, effectPrevCol, targetBoundRect, tableBoundRect) + : getFixedToLeftResizeInfo(targetBoundRect, tableBoundRect); + // 调整表格列宽 const onColumnMousedown = (e: MouseEvent, col: BaseTableCol, index: number) => { if (!resizeLineParams.draggingCol) return; @@ -204,7 +223,7 @@ export default function useColumnResize(params: { const effectPrevCol = effectColMap.value[col.colKey]?.prev; const { resizeLinePos, minResizeLineLeft, maxResizeLineLeft } = isColRightFixActive(col) ? getFixedToRightResizeInfo(target, col, effectNextCol, targetBoundRect, tableBoundRect) - : getNormalResizeInfo(col, effectPrevCol, targetBoundRect, tableBoundRect); + : getOtherResizeInfo(col, effectNextCol, targetBoundRect, tableBoundRect); // 开始拖拽，记录下鼠标起始位置 resizeLineParams.isDragging = true; @@ -259,7 +278,7 @@ export default function useColumnResize(params: { if (canResizeSiblingColWidth) { newThWidthList[tmpCurrentCol.colKey] += moveDistance; } - newThWidthList[effectPrevCol.colKey] -= moveDistance; + effectPrevCol && (newThWidthList[effectPrevCol.colKey] -= moveDistance); } updateThWidthList(newThWidthList); const tableWidth = getTotalTableWidth(newThWidthList); From 95ec2a17dd036e032ea7b8767f03c4a14b92c192 Mon Sep 17 00:00:00 2001 From: caiozhang Date: Wed, 12 Apr 2023 10:41:38 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix(table):=20=E4=BF=AE=E5=A4=8Dtable?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9C=A8=E6=8B=96=E6=8B=BD=E4=BD=BF=E6=A8=AA?= =?UTF-8?q?=E5=90=91=E6=BB=9A=E5=8A=A8=E6=9D=A1=E9=9A=90=E7=8E=B0=E5=90=8E?= =?UTF-8?q?=E5=88=97=E5=AE=BD=E6=97=A0=E6=B3=95=E6=AD=A3=E5=B8=B8=E8=B0=83?= =?UTF-8?q?=E6=95=B4=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/table/hooks/useColumnResize.ts | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/table/hooks/useColumnResize.ts b/src/table/hooks/useColumnResize.ts index 80323ff8a..930afd323 100644 --- a/src/table/hooks/useColumnResize.ts +++ b/src/table/hooks/useColumnResize.ts @@ -203,7 +203,20 @@ export default function useColumnResize(params: { }); return tableWidth; }; - + const getSiblingColCanResizable = ( + newThWidthList: { [key: string]: number }, + effectNextCol: BaseTableCol, + distance: number, + index: number, + ) => { + let isWidthAbnormal = true; + if (effectNextCol) { + const { minColWidth, maxColWidth } = getMinMaxColWidth(effectNextCol); + const targetNextColWidth = newThWidthList[effectNextCol.colKey] + distance; + isWidthAbnormal = targetNextColWidth < minColWidth || targetNextColWidth > maxColWidth; + } + return !(isWidthAbnormal || isWidthOverflow.value || index === leafColumns.value.length - 1); + }; const getOtherResizeInfo = ( col: BaseTableCol, effectPrevCol: BaseTableCol, @@ -250,13 +263,14 @@ export default function useColumnResize(params: { */ const thWidthList = getThWidthList('calculate'); const currentCol = effectColMap.value[col.colKey]?.current; - const currentSibling = resizeLineParams.effectCol === 'next' ? currentCol.prevSibling : currentCol.nextSibling; + const currentSibling = resizeLineParams.effectCol === 'next' ? currentCol.nextSibling : currentCol.prevSibling; // 多行表头，列宽为最后一层的宽度，即叶子结点宽度 const newThWidthList = { ...thWidthList }; // 当前列不允许修改宽度，就调整相邻列的宽度 const tmpCurrentCol = col.resizable !== false ? col : currentSibling; - // 是否允许调整相邻列宽：列宽未超出时，且并非是最后一列（最后一列的右侧拉伸会认为是表格整体宽度调整） - const canResizeSiblingColWidth = !(isWidthOverflow.value || index === leafColumns.value.length - 1); + // 是否允许调整后一列的列宽：列宽未超出时，满足后一列设置的最大最小值时且并非是最后一列（最后一列的右侧拉伸会认为是表格整体宽度调整） + const rightCol = resizeLineParams.effectCol === 'next' ? currentCol.nextSibling : col; + const canResizeSiblingColWidth = getSiblingColCanResizable(newThWidthList, rightCol, moveDistance, index); if (resizeLineParams.effectCol === 'next') { // 右侧激活态的固定列，需特殊调整 From 64ea94e79f4f2ae2ee383e8520ec514bbe8b1e45 Mon Sep 17 00:00:00 2001 From: caiozhang Date: Wed, 12 Apr 2023 16:53:57 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix(table):=20=E4=BF=AE=E5=A4=8Dtable?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9C=A8=E5=BC=80=E5=90=AF=E5=A4=9A=E7=BA=A7?= =?UTF-8?q?=E8=A1=A8=E5=A4=B4=E6=97=B6=E7=82=B9=E5=87=BB=E5=AD=90=E8=A1=A8?= =?UTF-8?q?=E5=A4=B4=E5=90=8E=E6=8E=A7=E5=88=B6=E5=8F=B0=E6=8A=A5=E9=94=99?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/table/thead.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/table/thead.tsx b/src/table/thead.tsx index 9621fb5b5..19d055280 100644 --- a/src/table/thead.tsx +++ b/src/table/thead.tsx @@ -162,6 +162,7 @@ export default defineComponent({ const resizeColumnListener = this.resizable || !canDragSort ? { mousedown: (e: MouseEvent) => { + e.stopPropagation(); this.columnResizeParams?.onColumnMousedown?.(e, col, index); if (!canDragSort) { const timer = setTimeout(() => { From 0a7debfc546ac3471f4208807098d231b1db096c Mon Sep 17 00:00:00 2001 From: chaishi <974383157@qq.com> Date: Wed, 12 Apr 2023 21:20:51 +0800 Subject: [PATCH 4/4] fix(table): hide resizable --- src/table/thead.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/table/thead.tsx b/src/table/thead.tsx index 19d055280..0c4ce14f9 100644 --- a/src/table/thead.tsx +++ b/src/table/thead.tsx @@ -163,7 +163,9 @@ export default defineComponent({ ? { mousedown: (e: MouseEvent) => { e.stopPropagation(); - this.columnResizeParams?.onColumnMousedown?.(e, col, index); + if (this.resizable) { + this.columnResizeParams?.onColumnMousedown?.(e, col, index); + } if (!canDragSort) { const timer = setTimeout(() => { const thList = this.theadRef.querySelectorAll('th'); @@ -172,7 +174,9 @@ export default defineComponent({ }, 10); } }, - mousemove: (e: MouseEvent) => this.columnResizeParams?.onColumnMouseover?.(e, col), + mousemove: (e: MouseEvent) => { + this.resizable && this.columnResizeParams?.onColumnMouseover?.(e, col); + }, } : {}; const content = isFunction(col.ellipsisTitle) ? col.ellipsisTitle(h, { col, colIndex: index }) : undefined;