fix(table): 修复冻结列动态调整宽度问题

XiaoMi · Sep 7, 2022 · e3c0d06 · e3c0d06
1 parent 4c482d5
commit e3c0d06
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/ui/table/src/styles/table.scss b/packages/ui/table/src/styles/table.scss
@@ -138,10 +138,11 @@ $prefix: '#{$component-prefix}-table' !default;
         height: 100%;
         bottom: 0;
         right: 0;
+        border-left: 2px solid use-color('gray', 50);
         cursor: col-resize;
         z-index: 1;
 
-        &:hover {
+        .#{$prefix}-header__resizable:hover & {
           background-color: use-color-mode('primary');
         }
       }

diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts
@@ -250,6 +250,16 @@ export const useTable = ({
         nextColumns,
         scrollWidth ? scrollWidth / lastColumns.length : 100
       )
+
+      if (colWidths) {
+        // colWidths 记录的是最新的列宽，当它有值时，重置一下列宽，否则会导致冻结列动态调整宽度后定位不准
+        nextColumns = nextColumns.map((item, index) => {
+          return {
+            ...item,
+            width: colWidths[index],
+          }
+        })
+      }
     }
 
     let leftColumns = [] as any[]