diff --git a/packages/components/table/src/Table.tsx b/packages/components/table/src/Table.tsx index 9a9f201c2..8dcd7ab9e 100644 --- a/packages/components/table/src/Table.tsx +++ b/packages/components/table/src/Table.tsx @@ -55,7 +55,7 @@ export default defineComponent({ const sortableContext = useSortable(columnsContext.flattedColumns) const filterableContext = useFilterable(columnsContext.flattedColumns) const expandableContext = useExpandable(props, columnsContext.flattedColumns) - const tableLayout = useTableLayout(props, columnsContext, scrollContext, stickyContext.isSticky) + const tableLayout = useTableLayout(props, columnsContext, scrollContext, stickyContext.isSticky, mergedAutoHeight) const { activeSorters } = sortableContext const { activeFilters } = filterableContext diff --git a/packages/components/table/src/composables/useColumns.ts b/packages/components/table/src/composables/useColumns.ts index fc95f6f41..719d35aa1 100644 --- a/packages/components/table/src/composables/useColumns.ts +++ b/packages/components/table/src/composables/useColumns.ts @@ -324,7 +324,7 @@ function useColumnWidths( return { columnWidths, columnWidthsWithScrollBar, changeColumnWidth } } -function useColumnOffsets(columnWidths: ComputedRef, columnWidthsWithScrollBar: ComputedRef) { +function useColumnOffsets(columnWidths: Ref, columnWidthsWithScrollBar: ComputedRef) { const columnOffsets = computed(() => calculateOffsets(columnWidths.value)) const columnOffsetsWithScrollBar = computed(() => calculateOffsets(columnWidthsWithScrollBar.value)) return { columnOffsets, columnOffsetsWithScrollBar } diff --git a/packages/components/table/src/composables/useTableLayout.ts b/packages/components/table/src/composables/useTableLayout.ts index 9f6c3daea..a72cc3f01 100644 --- a/packages/components/table/src/composables/useTableLayout.ts +++ b/packages/components/table/src/composables/useTableLayout.ts @@ -16,6 +16,7 @@ export function useTableLayout( { hasEllipsis, hasFixed }: ColumnsContext, { scrollWidth, scrollHeight }: ScrollContext, isSticky: ComputedRef, + mergedAutoHeight: ComputedRef, ): ComputedRef<'auto' | 'fixed'> { return computed(() => { if (props.tableLayout) { @@ -24,7 +25,7 @@ export function useTableLayout( if (scrollWidth.value && hasFixed.value) { return scrollWidth.value === 'max-content' ? 'auto' : 'fixed' } - if (scrollHeight.value || isSticky.value || hasEllipsis.value || props.virtual) { + if (scrollHeight.value || mergedAutoHeight.value || isSticky.value || hasEllipsis.value || props.virtual) { return 'fixed' } return 'auto' diff --git a/packages/components/table/src/main/ColGroup.tsx b/packages/components/table/src/main/ColGroup.tsx index 327faa2ba..1b1cfb863 100644 --- a/packages/components/table/src/main/ColGroup.tsx +++ b/packages/components/table/src/main/ColGroup.tsx @@ -47,7 +47,22 @@ export default defineComponent({ [`${prefixCls}-col-with-dropdown`]: type === 'selectable' && mergedSelectableMenus.value.length > 0, }) : undefined - const style = mergedWidth ? `width: ${convertCssPixel(mergedWidth)}` : undefined + let style: string | Record | undefined + if (isFixedHolder) { + style = mergedWidth ? `width: ${convertCssPixel(mergedWidth)}` : undefined + } else { + style = { + width: convertCssPixel(mergedWidth), + // for proTable: resizable, minWidth and maxWidth + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + minWidth: convertCssPixel(column.minWidth), + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + maxWidth: convertCssPixel(column.maxWidth), + } + } + return }) diff --git a/packages/components/table/src/main/MainTable.tsx b/packages/components/table/src/main/MainTable.tsx index 2fbd52627..d3af3070f 100644 --- a/packages/components/table/src/main/MainTable.tsx +++ b/packages/components/table/src/main/MainTable.tsx @@ -150,11 +150,11 @@ export default defineComponent({ } return () => { - const children = slots.default ? slots.default() : [] - const prefixCls = mergedPrefixCls.value + const autoHeight = mergedAutoHeight.value + const children = slots.default ? slots.default() : [] - if (scrollHeight.value || isSticky.value) { + if (autoHeight || scrollHeight.value || isSticky.value) { const { offsetTop } = mergedSticky.value if (!props.headless) { children.push( @@ -164,7 +164,7 @@ export default defineComponent({ ) } - if (props.virtual && (props.scroll || mergedAutoHeight.value)) { + if (props.virtual && (props.scroll || autoHeight)) { const itemRender: VirtualItemRenderFn = ({ item, index }) => renderBodyRow(item, index, slots, expandable.value, prefixCls) @@ -179,7 +179,7 @@ export default defineComponent({ } const { scroll, onScrolledBottom } = props - if (__DEV__ && !props.autoHeight && !isNumber(scroll?.height)) { + if (__DEV__ && !autoHeight && !isNumber(scroll?.height)) { Logger.warn('components/table', '`scroll.height` must is a valid number when enable virtual scroll') } diff --git a/packages/pro/table/demo/Resizable.md b/packages/pro/table/demo/Resizable.md index b466a9e73..dfa5b07e2 100644 --- a/packages/pro/table/demo/Resizable.md +++ b/packages/pro/table/demo/Resizable.md @@ -7,8 +7,11 @@ title: ## zh -可以通过配置 `resizable`，开启拖拽调整列宽，还可以配置 `maxWidth` `minWidth` 来限制列宽的范围。 +可以通过配置 `resizable`，开启拖拽调整列宽，还可以配置 `maxWidth` `minWidth` 来限制列宽的范围。 +如果发现设置 `scroll.width` 后无法出现横向滚动条，拖拽一列后导致其他列变得过窄，请对未设置 `width` 的列设置一个 `minWidth`. ## en Column width can be adjusted by configuring `resizable`, enabling drag and drop, and column width can be limited by configuring `maxWidth` and `minWidth`. + +If you find that setting `scroll.width` does not allow horizontal scrollbar to appear, and dragging one column causes the other columns to become too narrow, set a `minWidth` for the column that is not set `width`. diff --git a/packages/pro/table/demo/Resizable.vue b/packages/pro/table/demo/Resizable.vue index 812ebebad..b566c617b 100644 --- a/packages/pro/table/demo/Resizable.vue +++ b/packages/pro/table/demo/Resizable.vue @@ -3,6 +3,7 @@ :columns="columns" :dataSource="data" header="Pro Table" + :scroll="scroll" :toolbar="toolbar" @columnsChange="onColumnsChange" > @@ -49,27 +50,30 @@ const columns: ProTableColumn[] = [ dataKey: 'name', changeFixed: false, customCell: 'name', - resizable: true, + width: 150, minWidth: 100, + maxWidth: 300, + resizable: true, }, { title: 'Age', dataKey: 'age', changeFixed: false, + width: 100, resizable: true, - maxWidth: 120, }, { title: 'Address', dataKey: 'address', changeFixed: false, + width: 400, + minWidth: 200, resizable: true, - maxWidth: 300, - minWidth: 150, }, { title: 'Tags', dataKey: 'tags', + minWidth: 200, customCell: ({ value }) => value.map((tag: string) => { let color = tag.length > 5 ? 'warning' : 'success' @@ -84,6 +88,7 @@ const columns: ProTableColumn[] = [ key: 'action', changeIndex: false, customCell: 'action', + width: 200, }, ] @@ -100,4 +105,6 @@ for (let index = 0; index < 100; index++) { } years old, living in London Park no. ${index}.`, }) } + +const scroll = { width: 1200 } diff --git a/packages/pro/table/src/ProTable.tsx b/packages/pro/table/src/ProTable.tsx index 5e1f2c5bc..c1c26db90 100644 --- a/packages/pro/table/src/ProTable.tsx +++ b/packages/pro/table/src/ProTable.tsx @@ -91,8 +91,9 @@ export default defineComponent({ } return () => { - const { editable, customAdditional, customTag, layoutTool, toolbar, ...restProps } = props + const { editable, customAdditional, customTag, layoutTool, toolbar, tableLayout, ...restProps } = props const resizable = hasResizable.value + const mergedTableLayout = tableLayout ? tableLayout : resizable ? 'fixed' : undefined const mergedCustomAdditional: TableCustomAdditional = { ...customAdditional, @@ -116,6 +117,7 @@ export default defineComponent({ customAdditional={mergedCustomAdditional} customTag={mergedCustomTag} size={mergedSize.value} + tableLayout={mergedTableLayout} /> ) } diff --git a/packages/pro/table/style/index.less b/packages/pro/table/style/index.less index dabb393e9..17cc7db29 100644 --- a/packages/pro/table/style/index.less +++ b/packages/pro/table/style/index.less @@ -160,14 +160,14 @@ height: calc(@table-head-row-height-sm / 2); } } -} -.cdk-resizable { - &-preview { - position: absolute; - top: 0; - left: 0; - z-index: 8; - border-right: @border-width-sm @border-style #d1d1d1; + .cdk-resizable { + &-preview { + position: absolute; + top: 0; + left: 0; + z-index: 8; + border-right: 2px @border-style #d1d1d1; + } } }