fix(pro:table): resize one column to make the other columns too narrow

IDuxFE · Nov 15, 2022 · 1974a76 · 1974a76
1 parent 6082a15
commit 1974a76
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 22 deletions.
diff --git 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<number[]>, columnWidthsWithScrollBar: ComputedRef<number[]>) {
+function useColumnOffsets(columnWidths: Ref<number[]>, columnWidthsWithScrollBar: ComputedRef<number[]>) {
   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
@@ -16,6 +16,7 @@ export function useTableLayout(
   { hasEllipsis, hasFixed }: ColumnsContext,
   { scrollWidth, scrollHeight }: ScrollContext,
   isSticky: ComputedRef<boolean>,
+  mergedAutoHeight: ComputedRef<boolean>,
 ): 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
@@ -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<string, string> | 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 <col key={key} class={className} style={style}></col>
       })
 

diff --git 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<FlattedData> = ({ 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
@@ -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
@@ -3,6 +3,7 @@
     :columns="columns"
     :dataSource="data"
     header="Pro Table"
+    :scroll="scroll"
     :toolbar="toolbar"
     @columnsChange="onColumnsChange"
   >
@@ -49,27 +50,30 @@ const columns: ProTableColumn<Data>[] = [
     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<Data>[] = [
     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 }
 </script>
diff --git 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
@@ -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;
+    }
   }
 }