fix(table): fix fixed resize problem (#2598)

arco-design · Jul 28, 2023 · 5153fce · 5153fce
1 parent 78ddc1b
commit 5153fce
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/packages/web-vue/components/table/interface.ts b/packages/web-vue/components/table/interface.ts
@@ -281,6 +281,7 @@ export interface TableColumnData {
   rowSpan?: number;
   index?: number;
   parent?: TableColumnData;
+  _resizeWidth?: number;
 }
 
 export interface TableBorder {

diff --git a/packages/web-vue/components/table/table.tsx b/packages/web-vue/components/table/table.tsx
@@ -760,12 +760,18 @@ export default defineComponent({
     const dataColumns = ref<TableColumnData[]>([]);
     const groupColumns = ref<TableColumnData[][]>([]);
 
+    const { resizingColumn, columnWidth, handleThMouseDown } = useColumnResize(
+      thRefs,
+      emit
+    );
+
     watch(
-      [columns, slotColumns],
+      [columns, slotColumns, columnWidth],
       ([columns, slotColumns]) => {
         const result = getGroupColumns(
           slotColumns ?? columns ?? [],
-          dataColumnMap
+          dataColumnMap,
+          columnWidth
         );
         dataColumns.value = result.dataColumns;
         groupColumns.value = result.groupColumns;
@@ -994,11 +1000,6 @@ export default defineComponent({
       handleDrop,
     } = useDrag(draggable);
 
-    const { resizingColumn, columnWidth, handleThMouseDown } = useColumnResize(
-      thRefs,
-      emit
-    );
-
     const processedData = computed(() => {
       const travel = (data: TableData[]) => {
         const result: TableDataWithRaw[] = [];
@@ -1998,6 +1999,7 @@ export default defineComponent({
                   column={column}
                   operations={operations.value}
                   dataColumns={dataColumns.value}
+                  columnWidth={columnWidth}
                   resizable={resizable}
                   onClick={(ev: Event) => handleHeaderClick(column, ev)}
                 />

diff --git a/packages/web-vue/components/table/utils.ts b/packages/web-vue/components/table/utils.ts
@@ -66,7 +66,8 @@ const setParentFixed = (column: TableColumnData, fixed: 'left' | 'right') => {
 // Get the grouped header row data
 export const getGroupColumns = (
   columns: TableColumnData[],
-  columnMap: Map<string, TableColumnData>
+  columnMap: Map<string, TableColumnData>,
+  columnWidth: Record<string, number>
 ) => {
   const totalHeaderRows = getTotalHeaderRows(columns);
 
@@ -124,6 +125,10 @@ export const getGroupColumns = (
           cell.dataIndex = `__arco_data_index_${dataColumns.length}`;
         }
 
+        if (columnWidth[cell.dataIndex]) {
+          cell._resizeWidth = columnWidth[cell.dataIndex];
+        }
+
         // dataColumns和groupColumns公用一个cell的引用
         columnMap.set(cell.dataIndex, cell);
         dataColumns.push(cell);
@@ -209,7 +214,7 @@ export const getFixedNumber = (
       if (first.dataIndex === item.dataIndex) {
         break;
       }
-      count += item.width ?? 0;
+      count += item._resizeWidth ?? item.width ?? 0;
     }
     return count;
   }