diff --git a/src/table/hooks/useColumnResize.ts b/src/table/hooks/useColumnResize.ts index 7a42549ca..08b36918e 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) => { 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/hooks/useFixed.ts b/src/table/hooks/useFixed.ts index 3085a5c7c..cd73baa57 100644 --- a/src/table/hooks/useFixed.ts +++ b/src/table/hooks/useFixed.ts @@ -469,6 +469,13 @@ export default function useFixed( watch([maxHeight, data, columns, bordered], updateFixedHeader, { immediate: true }); + watch(finalColumns, () => { + resetThWidthList(); + if (columnResizable.value) { + recalculateColWidth.value(finalColumns.value, thWidthList.value, tableLayout.value, tableElmWidth.value); + } + }); + // 影响表头宽度的元素 watch( [ @@ -486,14 +493,6 @@ export default function useFixed( { immediate: true }, ); - watch(finalColumns, () => { - updateTableWidth(); - resetThWidthList(); - if (columnResizable.value) { - recalculateColWidth.value(finalColumns.value, thWidthList.value, tableLayout.value, tableElmWidth.value); - } - }); - const refreshTable = debounce(() => { updateTableWidth(); updateFixedHeader(); diff --git a/src/table/thead.tsx b/src/table/thead.tsx index 9baaef27b..893ff5b86 100644 --- a/src/table/thead.tsx +++ b/src/table/thead.tsx @@ -28,7 +28,7 @@ export interface TheadProps { columnResizeParams: { resizeLineRef: HTMLDivElement; resizeLineStyle: Object; - onColumnMouseover: (e: MouseEvent) => void; + onColumnMouseover: (e: MouseEvent, col: BaseTableCol) => void; onColumnMousedown: (e: MouseEvent, col: BaseTableCol) => void; }; resizable: Boolean; @@ -115,7 +115,7 @@ export default defineComponent({ const resizeColumnListener = this.resizable ? { mousedown: (e: MouseEvent) => this.columnResizeParams?.onColumnMousedown?.(e, col), - mousemove: (e: MouseEvent) => this.columnResizeParams?.onColumnMouseover?.(e), + mousemove: (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 aae367bad..821af08df 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -300,6 +300,11 @@ export interface BaseTableCol { * 限制拖拽调整的最小宽度和最大宽度。`resize.minWidth` 默认为 `80`,`resize.maxWidth` 默认为 `600` */ resize?: TableColumnResizeConfig; + /** + * 是否允许拖拽调整该列大小,仅当 `table.resizable = true` 时生效 + * @default true + */ + resizable?: boolean; /** * 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染,插槽名称为 title 的值。优先级高于 render */