diff --git a/src/table/hooks/useColumnResize.ts b/src/table/hooks/useColumnResize.ts index 047063983..c767d6759 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({ @@ -45,19 +46,37 @@ export default function useColumnResize( 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 = 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, nearCol: BaseTableCol) => { + const onColumnMousedown = ( + e: MouseEvent, + col: BaseTableCol, + effectNextCol: BaseTableCol, + effectPrevCol: BaseTableCol, + ) => { // 非 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; @@ -112,11 +131,16 @@ export default function useColumnResize( width = maxColWidth; } // 更新列宽 - setThWidthListByColumnDrag(col, width, nearCol); + 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 1f9353b60..b0bba95e3 100644 --- a/src/table/thead.tsx +++ b/src/table/thead.tsx @@ -29,7 +29,12 @@ export interface TheadProps { resizeLineRef: HTMLDivElement; resizeLineStyle: Object; onColumnMouseover: (e: MouseEvent) => void; - onColumnMousedown: (e: MouseEvent, col: BaseTableCol, nearCol: BaseTableCol) => void; + onColumnMousedown: ( + e: MouseEvent, + col: BaseTableCol, + effectNextCol: BaseTableCol, + effectPrevCol: BaseTableCol, + ) => void; }; resizable: Boolean; } @@ -118,6 +123,7 @@ export default defineComponent({ e, col, index < row.length - 1 ? row[index + 1] : row[index - 1], + index > 0 ? row[index - 1] : row[index + 1], ), mousemove: (e: MouseEvent) => this.columnResizeParams?.onColumnMouseover?.(e), }